React Router嵌套路由：如何让商品详情页独立渲染而非在父组件内？

要让SelectedProduct组件完全独立渲染（而非嵌套在Products组件内），只需完成以下两处修改：

1. 重构路由结构 #

把商品详情路由从/products的嵌套子路由改为同级独立路由。这样当访问/products/:productId时，React Router会直接渲染SelectedProduct，不会加载父组件Products。

修改后的路由配置：

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

2. 删除Products组件中的<Outlet /> #

由于不再需要在Products内部渲染子路由内容，直接移除组件里的<Outlet />标签即可。

修改后的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的商品列表嵌套显示。

内容的提问来源于stack exchange，提问作者atanasovlj