Nested routing is not working. 'Landing' And 'home' components showing properly but nested components are not rendering.
The layout component is directly imported in app.js there is no error in the console but nested components such as 'Feed' and 'Myprofile' are not rendering.
see the code
import React from 'react';
import { Route, Switch, BrowserRouter as Router} from 'react-router-dom';
import Sidebar from '../componants/Sidebar'
import Navbar from '../componants/Navbar';
import PathRouter from '../Routers/PathRouters'
import Landing from '../pages/Landing';
const Home=()=>{
return(
<>
<div className="container-fluid">
<Navbar />
<div className="rows row">
<div className='col-3'>
<Sidebar />
</div>
<div className="col-9 ">
<div className="content">
<Switch>
{PathRouter.map((prop, key) => {
return (
<Route
exact path={prop.path}
component={prop.component}
key={key}
/>
);
}
)}
</Switch>
</div>
</div>
</div>
</div>
</>
)
}
const Layout = () => {
return (
<>
<Router>
<Switch>
<Route exact path='/' component={Landing} />
<Route exact path='/home' component={Home} />
</Switch>
</Router>
</>
)
}
export default Layout;
This is Pathrouter.js
import Feed from '../pages/Feed';
import Answer from '../pages/Answer';
import Addquestion from '../componants/Addquestion';
import Myprofile from '../componants/Myprofile';
var PathRouter = [
{
path: '/home/feed',
name: 'Feed',
component: Feed
},
{
path: '/home/answer/:q_id',
name: 'answer',
component: Answer
},
{
path: '/home/addquestion',
name: 'addquestion',
component: Addquestion
},
{
path: '/home/myprofile',
name: 'myprofile',
component: Myprofile
}
]
export default PathRouter;
In the Layout
component the line <Route exact path='/home' component={Home} />
is breaking your nested routes. For the nested route to render the parent route must also render, since '/home/feed'
does not exactly match '/home'
the parent route will not be rendered. Remove exact
from the '/home'
route. – Jacob Smit