如何使用反应路由器创建动态路由答案

【问题标题】：How to create a dynamic route in react with react router如何使用反应路由器创建动态路由
【发布时间】：2023-04-11 07:44:01
【问题描述】：

请发现在反应路由器中创建路由很困难

我想创建这样的路线<Route path="/:storeId" component={StorePage} /> 但我也有这样的路线/stores 任何时候我去/:storeId页面它都会加载/users页面我只是困惑

这里是代码

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

请帮忙。

【问题讨论】：

请分享您的代码，以便我们为您提供帮助。
好的<Switch> <ScrollToTop> <MainLayout> <Route exact path="/"> <Home /> </Route> <Route exact path="/stores"> <Stores /> </Route> <Route exact path="/:storeId"> <StorePage /> </Route> </MainLayout> </ScrollToTop> </Switch> 请我故意不想要<Route path="/stores/:storeId" />
请编辑您的问题并在此处添加您的代码
好的。 . .完成
您的代码现在缺少/user 案例。也许阅读reactrouter.com/web/api/Switch 看看是否有帮助。特别是关于事物的顺序

标签： javascript reactjs routes react-router

【解决方案1】：

你应该这样做

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

【讨论】：

所以没有办法用/:id代替/users/:id
你也可以使用它，但我觉得/users/:id 是更好的代表。似乎/:id 会让您更加头疼，因为所有链接在技术上都符合该路线的条件
好吧，我只是想看看我能不能像 /:id 这样完成它，因为这就是我想要的方法。我想知道为什么在反应路由器中听到
做我上面做的。只需替换/:id，但不要使用精确与/:id