Why page only loading with React Router? - javascript

I have set Link and Route path with my header.js file. But with the laravel and react app, when i run npm run dev , it runs successfully. After that, when i run localhost:8000, the page only loading not showing any content. when i remove the
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
from script, it runs successfully, but with above code, it's only loading the page.
Header.js
import React, { Component } from 'react';
import{ BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './Index';
import About from './about';
export default class header extends Component {
render() {
return (
<Router>
<div>
<Link to ="/">Home</Link>
<Link to ="/about">About Us</Link>
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
</div>
</Router>
);
}
}
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Index extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
Welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" />
<title>Laravel</title>
</head>
<body>
<div id="app">
<h1>Hello... This is example</h1>
</div>
<script src="js/app.js"></script>
</body>
</html>

If my understanding is correct then I guess you can't call Index.js from Index.js.
What I mean to say is that you are trying to render the Index.js infintely.
Index.js is your root component. It has <Header/> which calls Index.js when the route matches the path /. Then it again calls Index.jswhich has <Header/> and so on.
What you can do instead is define a new Home component and create a new index.js to save yourself from the Infinite loop.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Home extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Home />, document.getElementById('app'));
}

You have an infinite recursive loop:
Index renders the component Header.
Header renders the component <Route exact path ="/" component={Index} />
This Route renders Index when you are on /
<Route/> works by rendering the component prop when you are on the path prop.

Related

Using Next/Head outside of _document.js makes my build crash, why?

My build was working fine yesterday, now when I run a build and run npm start, I get a client side error that crashes the app.
The only way to fix it is to remove next/head.
I have stripped down my app to one index.jsx file with only the following:
import Head from "next/head";
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
);
}
export default IndexPage;
_document.js
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
import Header from "../components/Header";
export default function Document() {
return (
<Html lang="en">
<body class="onepage">
{/* <Header /> */}
<Head />
<Main />
<NextScript />
{/* <script src="/scripts/plugins.js"></script>
<script src="/scripts/theme.js"></script> */}
</body>
</Html>
);
}
app.js
import "../styles/style.css";
import "../styles/plugins.css";
import Script from "next/script";
import Layout from "#/components/Layout/Layout";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
<Script src="/scripts/plugins.js" />
<Script strategy="lazyOnload" src="/scripts/theme.js" />
</Layout>
);
}
When I open localhost:3000 on the build, it is infinitely spamming the same console error:
TypeError: Cannot read properties of null (reading 'content')
What could possibly be going on?
Also, I tried deleting my .nuxt,node_modules folders and package-lock.json, still nothing.

localHost 3000 showing blank page

I am trying to write my first web app with React and Node. I have written some JS and CSS for a component called Banner and rendered it in App.js, but when I save my changes, the change is not reflected on localhost:3000 which just shows a blank page.
The only time I got the localhost:3000 to show anything was when I wrote some text in HTML p tags in the body of the index.html. Then, the browser displayed the text.
I have also tried moving the id=root from index.html to App.js. That did not work.
Please, what am I doing wrong? How do I get the browser to display my components?
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
import React from 'react'
function Banner() {
return (
<div className="banner">
<h1> Some Text that goes on Banner </h1>
</div>
)
}
import React from 'react';
import './App.css';
import Banner from './components/Banner';
import Exhibit from './components/Exhibit'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
class App extends Component {
render() {
return (
<>
<Router>
<Banner />
</Router>
</>
);
}
}
.banner {
height: 30vh;
width: 100%;
position: fixed;
align-items: center;
background-color: #b300b3;
}
.banner > h1 {
color: #FFF;
font-size: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Title of Web App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Try to be more minimal in this level.
Only use banner component in App.js file.
delete router and <> </> in App.js file.
replace class App extends Component with class App extends React.Component
or add import { Component } from 'react'

How can I work with Paypal Payouts on my React app?

I am trying to integrate Paypal Payouts to my React app. However, I am stuck at the AAC part where I generate a component to let the user connect.
I tried to either load the script in index.html or to load it using the paypal-checkout package.
In the first case, I get told that paypal isn't defined and in the second case, I get told that I can't get the property driver from undefined.
Here is my code and my index.html.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const AACComponent = paypal.PayoutsAAC.driver('react', {
React,
ReactDOM
});
export class Affiliation extends Component {
render () {
const { t } = this.props;
const { data, candidates, hirees } = this.state;
return (
<Screen type="background-white" loading={this.state.loading} title={this.props.t('pages:affiliation')}>
<div className="container tw-space-y-3">
<div className="row">
<div className="col-lg-6 tw-mx-auto">
<div className="tw-card">
<h2 className="tw-text-xl tw-font-bold">{t('affiliationHired')}</h2>
<AACComponent
clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
merchantId={process.env.REACT_APP_PAYPAL_MERCHANT_ID}
env={process.env.REACT_APP_PAYPAL_ENV}
pageType="login"
onLogin={() => {}} />
</div>
</div>
</div>
</div>
</Screen>
);
}
}
Affiliation.propTypes = {
t: PropTypes.func.isRequired
};
export default withRouter(withTranslation('common')(Affiliation));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
</head>
<script src="https://www.paypalobjects.com/payouts/js/payouts_aac.js"></script>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I removed the unecessary code to not clutter my code.
Any idea?

Adding react-helmet into my Gatsby project causes an error: Element type is invalid

I have a component Layout which I used to style the layout of my app and that's where I introduced react-helmet
The component is like this
import React from 'react';
import { Global, css } from '#emotion/core';
import Helmet from 'react-helmet';
import Header from '../components/header';
const Layout = ({ children }) => (
<>
<Global
styles={css`
// some CSS style
/>
<Helmet>
<html lang="en" />
<title>title</title>
<meta name="description" content="site description" />
</Helmet>
<Header />
<main
css={css`
// some css
`}
>
{children}
</main>
</>
);
export default Layout;
After I added <Helmet />, I have this error poppin up. And if I removed <Helmet /> from my component, the error would be gone. apparently I didn't forgot to export my Layout component so I really have no idea where this came from.
You need to use named import with react-helmet.
import {Helmet} from "react-helmet";
Docs: https://github.com/nfl/react-helmet#example

React Router: Target container is not a DOM element

I am getting this error while following React Router Tutorial HERE and HERE
It should work as it's supposed to do, because in index.html i have added "app" as id in a div container.
_registerComponent(...): Target container is not a DOM element.
./src/index.js
src/index.js:15
Here is INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import About from './modules/About'
import Repos from './modules/Repos'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
ReactDOM.render((
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<App />
<Route exact path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</div>
</Router>
), document.getElementById('app'));
INDEX.HTML
<!doctype html>
<html>
<head>
<title>My First React Router App</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
I was facing same issue-
My src/index.js looking like this-
ReactDOM.render(<App />,routing, document.getElementById('root'));
I moved all routes in a variable such as routing and now code in src/index.js file looks like-
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import About from './pages/abouts/about';
import Contact from './pages/contacts/contact';
import * as serviceWorker from './serviceWorker';
const routing = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
serviceWorker.unregister();
So, no need to pass <App/> any more in ReactDOM and that worked for me.

Categories