Reputation: 621
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>
Upvotes: 0
Views: 228
Reputation: 237
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.js
which 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'));
}
Upvotes: 1
Reputation: 2471
You have an infinite recursive loop:
<Route exact path ="/" component={Index} />
/
<Route/>
works by rendering the component
prop when you are on the path
prop.
Upvotes: 0