CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
Huy Nguyen
Huy Nguyen

Reputation: 591

Route does not render component on 2nd level of children

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?

Upvotes: 0

Views: 26

Answers (1)

Davo
Davo

Reputation: 986

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".

Upvotes: 1

Related Questions