如何使用React Router V4执行动态组件渲染？

Question

I have an application with a Login page followed by a Dashboard page. The routes that I've defined in the index.js are like this:

<Router>
  <div>
    <Route exact path="/" component={Login}/>
    <Route path="/dashboard" component={Dashboard} />
  </div>
</Router>

Dashboard.js:

return (
  <div>
    <Header/>
    <Footer/>
    <Switch>
     <Route path="/dashboard/content1" component={content1} />
     <Route path="/dashboard/content2" component={content2} />
    </Switch>
  </div>
);

The Dashboard component is rendering 3 of its child components. Header , Footer and Content1 . I want the Dashboard component to render Content1 by default (ie when the url is /dashboard ) and also when the url is /dashboard/content1 , and should render content2 when the url is /dashboard/content2 . Header & Footer components should remain. Please suggest the configuration for the Dashboard component to achieve the same.

Answer 1

In React-router v4 you provide Routes within the component, so you can write your Routes as follows

<Router>
  <div>
    <Route exact path="/" component={Login}/>
    <Route path="/dashboard" component={Dashboard} />
  </div>
</Router>

and then in the Dashboard Component render method

render() {
    return (
        <div>
            {/* other content */}
            <Switch>
               <Route exact path="/dashboard" component={content1} />
               <Route path="/dashboard/content1" component={content1} />
               <Route path="/dashboard/content2" component={content2} />
            </Switch>
        </div>

    )

}

Answer 2

As a variant of an answer to your post before you have edited it, you can do it (nesting) like this:

<Router>
    <Header/>
    <Content1/>
    <Footer/>
      <Switch>
        <Route exact path="/" component={Login}/>
        <Route exact path="/dashboard" component={Dashboard} />
        <Route exact path="/dashboard/content1" component={content1} />
        <Route exact path="/dashboard/content2" component={content2} />
      </Switch>    
</Router>

Answer 3

React-Router's Switch component renders the first thing that matches, so if you put a route without a path last, it will render that if no other routes match, essentially treating it as a default. Like so:

return (
    <div>
        <Header/>
        <Footer/>
        <Switch>
            <Route path="/dashboard/content2" exact component={Content2} />
            <Route component={Content1} />
        </Switch>
    </div>
);

I have found that rendering a component instead of a Route also works, although I dont know if it's officially supported.

return (
    <div>
        <Header/>
        <Footer/>
        <Switch>
            <Route path="/dashboard/content2" exact component={Content2} />
            <Content1 />
        </Switch>
    </div>
);