Route does not render component on 2nd level of children

962 views reactjs
4

In App.js

    <Switch>
      <Route path="/signin" component={SignIn} />
      <Route path="/signout" component={SignOut} />
      <Route path="/" component={Dashboard} />
      <Redirect to="/" />
    </Switch>

In Dashboard.js

      <Switch>
        <Route path='/students' component={ManageStudents} />
        <Route path='/lecturers' component={ManageLecturers} />
        <Route path='/surveys' component={ManageSurveys} />
      </Switch>

In ManageStudents.js

    <Switch>
      <Route path='/students/upload' component={UploadFileArea}/>
    </Switch>

I can access /signout in Dashboard but in ManageStudents when I click signout the url is http://localhost:3000/students/signout but i doesn't render Signout component. Add <Route path="/students/signout" component={SignOut} /> and it can render. Can anyone explain why does it happen and solution without adding an additional route?

answered question

Can you share how you're building your link to "signout"?

@Davo oh, I just found out I'm retarded when setup the NavLink for signout. I use to='signout' instead of '/signout'. It's fine now. Thank you for poiting out the root of my stupidity

Haha, no problem! Stuff like that happens all the time man. I still think your question is valuable. I just added the answer while you replied to the comment so others may find it useful ;)

1 Answer

12

If you get redirected to http://localhost:3000/students/signout there's actually no route that resolves to SignOut component under that URL pattern (that's why it fails):

<Switch>
  <Route path="/signin" component={SignIn} />
  <Route path="/signout" component={SignOut} />
  <Route path="/" component={Dashboard} />
  <Redirect to="/" />
</Switch>

However, you don't need to add the route to cover that scenario (your routes look fine). I most likely need to update the way you're building your the link that points to "signout".

posted this

Have an answer?

JD

Please login first before posting an answer.