react-router-dom 开关在动态路径后不渲染组件

Posted 2023-02-19

【中文标题】react-router-dom 开关在动态路径后不渲染组件

【英文标题】：react-router-dom switch not rendering components after dynamic path

【发布时间】：2022-01-23 03:08:16

【问题描述】：

我一直在关注电子商务教程并在此基础上进行构建。我是 React 和 React Router Dom 的新手。 我已经为各个产品页面设置了动态路径，现在我尝试添加一些新路径，即联系人、关于等。如果我在动态路径上方添加新路径，它们会正确呈现，但如果我放置在具有动态路径的路径下的路由，例如 /hello，它们不会呈现。这是正常行为吗？？

<Router>
<div>
    <Navbar totalItems=cart.total_items />
    <Switch>
        <Route exact path="/">
            <Home products=products handleAddToCart=handleAddToCart fetchProduct=fetchProduct />
        </Route>
        <Route exact path="/checkout">
            <Checkout cart=cart order=order handleCaptureCheckout=handleCaptureCheckout error=errorMessage refreshCart=refreshCart />
        </Route>
        <Route exact path="/cart">
            <Cart
                cart=cart
                handleUpdateCartQuantity=handleUpdateCartQuantity
                handleRemoveFromCart=handleRemoveFromCart
                handleEmptyCart=handleEmptyCart
            />
        </Route>
        <Route exact path="/contact">
            <Contact />
        </Route>
        <Route exact path="/:id">
            <Details product=product handleAddToCart=handleAddToCart />
        </Route>
        <Route exact path="/hello">
            <h1>Hello World</h1>
        </Route>
    </Switch>
</div>
<Router>

【参考方案1】：

是的，这种行为完全是正常的，也是意料之中的。回想一下Switch 组件“呈现与位置匹配的第一个子<Route> 或<Redirect>。”这意味着在Switch 组件中路径顺序和特异性很重要！

"/hello" 的路径更多比 "/:id" 更具体，因此可能会或可能不会首先匹配路由顺序。或者换句话说，"/hello" 总是可以匹配到"/:id"，但并非总是相反。

您应该始终将路线从更具体的路径排序到不太具体的路径，如果做得正确，exact 道具的需求应该接近零。

"/hello" 比 "/:id" 更具体，"/:id" 比 "/" 更具体。

<Switch>
  <Route path="/checkout">
    <Checkout ... />
  </Route>
  <Route path="/cart">
    <Cart ... />
  </Route>
  <Route path="/contact">
    <Contact />
  </Route>
  <Route path="/hello">
    <h1>Hello World</h1>
  </Route>
  <Route path="/:id">
    <Details ... />
  </Route>
  <Route path="/">
    <Home ... />
  </Route>
</Switch>

例如，如果您有一个嵌套的 "/contact/add" 路由，则它更多比 "/contact" 更具体，应该列在 更高/之前 在Switch.

【参考方案2】：

尝试从路线中删除确切的内容。

<Route exact path="/:id">

到：

<Route path="/:id">