Routes not rendering with react-router-dom - reactjs

Question

My site's entering scenario is
/ -> /home
-> /about
-> /project
When connect to site.com/, there is welcome message and enter button.
After click the 'enter' button, /home will be show.
And /home has Navbar that has two components /about and /project
So, user can click the navbar menu to navigate another page.
/about is works properly, but /project doesn't work. It displayed blank page.
[App.js]
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
import Project from './components/Project';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
</div>
</Router>
);
}
}
export default App;
[Home.js]
import React, { Component } from 'react';
import Header from '../Header';
import Project from '../Project';
import About from '../About';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route } from 'react-router-dom'
import {
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink } from 'reactstrap';
class index extends Component {
render() {
return (
<BrowserRouter>
<div className="home">
<Header />
<Route path="/home" component={About}/>
<Route path="/project" component={Project}/>
</div>
</BrowserRouter>
);
}
}
export default index;
[Header.js]
import React, { Component } from 'react';
import {
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink } from 'reactstrap';
class index extends Component {
render() {
return (
<div className="navbar_fixed">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Hide</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/home">About</NavLink>
</NavItem>
<NavItem>
<NavLink href="/project">Project</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
}
}
export default index;
[About.js]
import React, { Component } from 'react';
import './index.css';
export default class index extends Component {
render() {
return (
<div>
Some codes for About.js
</div>
);
}
}
[Project.js]
import React, { Component } from 'react';
import './index.css';
export default class index extends Component {
render() {
return (
<div>
Some codes for Project.js
</div>
);
}
}
When I entered to /home, It shows About.js component with navbar.
But entered to /project, It show nothing.
I can't find where is the error.
How can I fixed it?
Thanks.
[SOLVED]
Change the code to Shubham Khatri's code and add exact to <Route exact path="/home" component={About}/>

Answer 1

Your Header component isn't receiving the react-router props and hence its navigation doesn't work properly, You could write Header as a default Route. Also you need to use BrowserRouter only once at the top of your App
Also with nested Route, you need to specify the relative routes
class index extends Component {
render() {
const { match } = this.props;
return (
<div className="home">
<Route component={Header} />
<Switch>
<Route path={`${match.path}/project`} component={Project}/>
<Route path="/home" component={About}/>
</Switch>
</div>
);
}
}
and your Header.js will be
import React, { Component } from 'react';
import {
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink } from 'reactstrap';
class index extends Component {
render() {
const { match } = this.props;
return (
<div className="navbar_fixed">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Hide</NavbarBrand>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/home">About</NavLink>
</NavItem>
<NavItem>
<NavLink href={`${match.url}/project`}>Project</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
}
}
export default index;