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.

Okay <Switch> <ScrollToTop> <MainLayout> <Route exact path="/"> <Home /> </Route> <Route exact path="/stores"> <Stores /> </Route> <Route exact path="/:storeId"> <StorePage /> </Route> </MainLayout> </ScrollToTop> </Switch> Please I intentionally don't want <Route path="/stores/:storeId" /> — John Chimaobi
– John Chimaobi, Commented Apr 19, 2021 at 22:16
Your code is missing the /user case now. Maybe have a read of reactrouter.com/web/api/Switch and see if that helps. Specifically about the order of things — Dominik
– Dominik, Commented Apr 19, 2021 at 22:26

Udendu Abasili · Accepted Answer · 2021-04-19 22:30:58Z

1

You should do something like this

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

answered Apr 19, 2021 at 22:30

Udendu Abasili

1,2232 gold badges16 silver badges31 bronze badges

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

4 Comments

John Chimaobi Over a year ago

So there is no way to user /:id instead of /users/:id

Udendu Abasili Over a year ago

you can use that too but i feel /users/:id is a better representation. It seems like /:id would give you more headache since all links would technically qualify for that route

John Chimaobi Over a year ago

Okay, I was just try to see if I could get it done like this /:id cause thats the approach I wanted. I wonder why is heard in react router

Udendu Abasili Over a year ago

do what i did above. Just replace /:id but dont use exact with /:id

Collectives™ on Stack Overflow

How to create a dynamic route in react with react router

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related