How to create a dynamic route in react with react router

Question

Please am finding it difficult to create a route in react router

I want to create a route like this <Route path="/:storeId" component={StorePage} /> But I also have a route like this /stores Any time I go to the /:storeId page it loads the /users page Am just confuse

Here is the code

<Switch>
  <ScrollToTop>
    <MainLayout>
      <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/stores">
        <Stores />
      </Route>
      <Route exact path="/:storeId">
        <StorePage />
      </Route>
    </MainLayout>
  </ScrollToTop>
</Switch>

Any help please.

Answer 1

You should do something like this

<Switch>
  <Route exact path="/users">
        <Users/>
      </Route>
      <Route path="/users/:id">
        <UserById/>
      </Route>
</Switch>