React Route rendering wrong component

Naveen Ravi 0
Viewed 34

I'm using react-router-dom@5.2.0 for routing and I'm having some trouble with the react routing.

Here is my app.js render code:

return (
  <div>
    <BrowserRouter>
      <Context>
        {/* Students */}
        <Route exact path='/student'><Home /></Route>
        <Route path='/student/signup'><SignupScreen /></Route>

        {/* Tutors */}
        <Route path='/tutor/signup'><TSignupScreen /></Route>
      </Context>
    </BrowserRouter>
  </div>
);

When I visit "/student" route it renders student signup component but the url is not changing. you can see the image below enter image description here

react-router-dom reactjs
1 Answers

Wrap all your routes inside Switch, which renders the first child that matches the location.

import { BrowserRouter, Route, Switch } from "react-router-dom";
...
<BrowserRouter>
    <Context>
      <Switch>
      {/* Students */}
      <Route exact path='/student'><Home /> </Route>
      <Route path='/student/signup' > <SignupScreen /> </Route>

      {/* Tutors */}
      <Route path='/tutor/signup'> <TSignupScreen />  </Route>
      </Switch>
    </Context>
 </BrowserRouter>
Sanket Shah0
Related