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

【问题标题】：react-router-dom switch not rendering components after dynamic pathreact-router-dom 开关在动态路径后不渲染组件
【发布时间】：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>

【问题讨论】：

标签： html reactjs react-router-dom

【解决方案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">

【讨论】：