reactjs - React router taking 'new' as id

Question

I am using ReactRouter in my react project. I am using routing like this:

  <Switch>
    <Route exact path="/users/new">
      <CreateUser />
    </Route>
    <Route exact path="/users/:userId">
      <Profile />
    </Route>
  <Switch>

Here I am facing problem when I am trying to load localhost:3000/users/new the <Profile /> component load as well as <CreateUser /> component and show error 'new' is not a valid userId. Without changing the path how can I solve this?

question from:https://stackoverflow.com/questions/66059538/react-router-taking-new-as-id

Answer 1

You should change the order of routes. Route with users/new should come first, followed by users/:userID. In your case router interprets users/new as users/:userID