How to perform dynamic component rendering using 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 (i.e. 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.

in that case define `content1` and `content2` route inside `Dashboard` component, check [**this answer**](https://stackoverflow.com/questions/42254929/how-to-nest-routes-in-react-router-v4) for more details. — Mayank Shukla, Aug 21 '17 at 10:34
@MayankShukla I've updated my question with more details. Can you suggest something bit detailed please? — m-ketan, Aug 21 '17 at 10:41

score 0 · Answer 1 · answered Aug 21 '17 at 10:40

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>

    )

}

score 0 · Answer 2 · answered Aug 21 '17 at 10:48

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>

score 0 · Answer 3 · answered Aug 21 '17 at 13:30

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>
);

The `````` component renders by default now(on ```/dashboard```) but hitting the ```/dashboard/content2``` url throws a 404 error. — m-ketan, Aug 22 '17 at 05:51

How to perform dynamic component rendering using react router v4?

3 Answers3