reactjs - React Router嵌套路由在父路由内部渲染，如何单独渲染？

Question

我正在制作一个购物页面，并且展示了产品。每次用户点击产品时，路由器都应该呈现产品页面，其中包含产品的所有信息。

我的路线设置如下:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/products" element={<Products />}>
        <Route path=":productId" element={<SelectedProduct />} />
      </Route>
    </Routes>
  </BrowserRouter>

在 <Products /> 的内部我有:

return (
        <div className="full-products-container">
            <div className="displayed-products-container">
                {productsToDisplay.map((product) => (
                    <Link
                        to={`/products/${product.id}`}
                        key={product.id}
                        className="product-box"
                    >
                        <img
                            src={product.image}
                            className="product-image-displayed"
                        />
                        <div className="product-name">{product.name}</div>
                        <div className="product-price">${formatNumber(product.price)}</div>
                    </Link>
                ))}
            </div>
            <Outlet />
        </div>
    );

现在，每次点击产品时，<SelectedProduct />组件在我的 <Products /> 内部渲染组件？

如何让每次点击产品时，<SelectedProduct />完全渲染？而且不在它的父级内部？

Answer 1

如果您希望 SelectedProduct 在其自己的页面上呈现，则应将其呈现为 "/products" 的同级路由，而不是作为嵌套子路由。

示例:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/products" element={<Products />} />
    <Route path="/products/:productId" element={<SelectedProduct />} />
  </Routes>
</BrowserRouter>

或

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/products">
      <Route index element={<Products />} /> // "/products"
      <Route
        path=":productId"                    // "/products/:productId"
        element={<SelectedProduct />}
      />
    </Route>
  </Routes>
</BrowserRouter>

正在渲染的 Link 组件 Products 已经使用绝对路径，因此链接无需更改，但现在 Products 已不再使用t 渲染为布局路由，它不需要渲染 Outlet 组件。

return (
  <div className="full-products-container">
    <div className="displayed-products-container">
      {productsToDisplay.map((product) => (
        <Link
          to={`/products/${product.id}`}
          key={product.id}
          className="product-box"
        >
          <img
            src={product.image}
            className="product-image-displayed"
          />
          <div className="product-name">{product.name}</div>
          <div className="product-price">${formatNumber(product.price)}</div>
        </Link>
      ))}
    </div>
  </div>
);