react中的嵌套路由不渲染嵌套组件

Question

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;

Answer 1

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