React Router unable to render Route

0
votes

New to react & react-router. I am using react-router-4

I have following components - Login - Home - Header - Sidebar - Content

Login component does not have either Header or Sidebar.

This is how I am routing

App.js

<Switch>
   <Route exact path='/login' component={Login}/>
   <Route exact path='/home' component={Home}/>
</Switch>

And then in my Home Component, I have Sidebar and Content.

Home.js render method

<Grid>
    <Grid.Row>
        <Grid.Column width={3}>
            <SideBar/>
        </Grid.Column>
        <Grid.Column width={13}>
          <Route exact path='/home/dashboard' render={() => <div>Home</div>} />
        </Grid.Column>
    </Grid.Row>
</Grid>

The SideBar component has a Link which has 'to' value '/home/dashboard'.

Unfortunately, this does not work. On clicking the SideBar Link, a blank page loads.

According to my understanding, in react router 4, you can render a Route anywhere in your Router hierarchy. This is what I am trying to achieve by rendering a Route in 'Grid.Column width={13}' div.

What am I missing here?

2
javascriptreactjsreact-routerreact-router-v4react-router-dom

2 Answers

3
votes

The second route in the Switch is the problem. It should be:

<Switch>
   <Route exact path='/login' component={Login} />
   <Route component={Home} />
</Switch>
0
votes

Reason behind it:-

<Switch> // switch is used here to switch between different routes.

<Route exact path='/' component={home} /> // it shows the base route for your application where your main page of application starts.

<Route path='/About' component={About}/> // it route to the component where you want to reach when click on a link

</Switch>