CODEWITHSUNDEEP
reactjsreact-router-dom
Naveen Ravi
Naveen Ravi

Reputation: 113

React Route rendering wrong component

I'm using [email protected] 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

Upvotes: 3

Views: 316

Answers (1)

Sanket Shah
Sanket Shah

Reputation: 3091

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>

Upvotes: 3

Related Questions