React Router dynamic url rendering over static url

Question

I have a path="/:user" but it also renders in other static pages like /register and /login because react-router thinks it is also a "username". How can I fix this without changing the pathnames of any of my routers? ie making a white list if that's possible?

Wanted behavior:

/1 -> renders 'hi user 1' page

/login -> renders login page

/register -> renders register page

Happening behavior:

/1 -> renders 'hi user 1' page

/login -> renders login and 'hi user login' page

/register -> renders register and 'hi user register' page

My code

ReactDOM.render(
  <AuthProvider>
    <ThemeProvider theme={theme}>
      <Router history={history}>
        <App />
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/admin" component={Admin} />
        <Route exact path="/:user" component={User} />
      </Router>
    </ThemeProvider>
  </AuthProvider>,
  document.getElementById('root')
);

It's mostly a case of missing exact on your route paths, please add your router logic in the description — prabhu
– prabhu, Commented Jul 30, 2020 at 7:34
Hey thanks for your reply, but I tried playing around with the exact keyword already. Doesn't fix it :| — Jpark9061
– Jpark9061, Commented Jul 30, 2020 at 7:37
Then please wrap Switch like <Switch> <Router></Router> </Switch> — prabhu
– prabhu, Commented Jul 30, 2020 at 7:47
It gives me this error Error: Invariant failed: You should not use <Switch> outside a <Router> — Jpark9061
– Jpark9061, Commented Jul 30, 2020 at 8:02
sry, i meant to say wrap the Route with Switch like this <Switch> <Route></Switch>. You could create a codesandbox to better help you — prabhu
– prabhu, Commented Jul 30, 2020 at 8:20

Foldaza · Accepted Answer · 2020-07-30 07:46:10Z

1

try using switch. It will stop looking for matches and render the first matched Route. Here's a link to the documentation: https://reactrouter.com/web/api/Switch

import { Route, Switch } from "react-router";

ReactDOM.render(
  <AuthProvider>
    <ThemeProvider theme={theme}>
      <Router history={history}>
        <App />
        <Switch>
          <Route exact path="/register" component={Register} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/admin" component={Admin} />
          <Route exact path="/:user" component={User} />
        </Switch>
      </Router>
    </ThemeProvider>
  </AuthProvider>,
  document.getElementById('root')
);

answered Jul 30, 2020 at 7:46

Foldaza

261 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jpark9061 Over a year ago

Hi thank you for your reply, but when I try this my pages just go blank and renders nothing.

Foldaza Over a year ago

@Jpark9061 could you share error which you see in browser console?

Jpark9061 Over a year ago

oh wait haha nevermind it worked, I accidentally put the switch key before <App /> which was why it wasn't working. I copy pasted your code and it works! Thank you so much :)

Collectives™ on Stack Overflow

React Router dynamic url rendering over static url

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related