更改路线时不渲染组件

Question

我有一个包含产品的页面。我的问题是，当我尝试单击产品时，网址正在更改，但屏幕上没有呈现任何内容。它仍然显示渲染所有产品的组件。

我尝试了几种不同的方法，但似乎没有任何效果

<Route path="store" element={<Store />}>
          <Route path="protein" element={<Products />} />
          <Route path="protein/*" element={<SingleProduct />} />
</Route>

我也尝试过：

<Route path="store" element={<Store />}>
          <Route path="protein" element={<Products />}>
            <Route path="*" element={<SingleProduct />} />
          </Route>
</Route>

还有：

<Route path="/store/protein/*" element={<SingleProduct />} />

这样它就不是子路由了。

但这也不起作用。有什么想法我做错了吗？

编辑：那是我的商店组件：

import React from "react";
import SidePanel from "../components/storeComponents/SidePanel";
import Products from "../components/storeComponents/Products";
import "./Store.css";

const Store = () => {
  return (
    <div className="store-page">
      <SidePanel />
      <Products />
    </div>
  );
};

export default Store;

Answer 1

当路由组件渲染后代路由时，使用尾随路径splats，例如如果

SingleProduct

渲染了另一个

Routes

和一组

Route

组件，则尾随的

"*"

也允许匹配这些路由。

Store

组件只是直接渲染

Products

组件。它应该为嵌套路由渲染一个

Outlet

组件来渲染其内容。

import { Outlet } from 'react-router-dom';

const Store = () => {
  return (
    <div className="store-page">
      <SidePanel />
      <Outlet />
    </div>
  );
};

您还在同一路线路径上渲染

Products

和

SingleProduct

。您可能希望在具有动态路径段的子路线路径上渲染

SingleProduct

，例如类似

"protein/:productId"

。

<Route path="store" element={<Store />}>
  <Route path="protein" element={<Products />} />
  <Route path="protein/:productId" element={<SingleProduct />} />
</Route>

确保

Products

组件正确链接到有效的

"/store/protein/:productId"

路径。例子：

从根开始的绝对路径

"/"

:

<Link to={`/store/protein/${product.id}`}>
  {product.title}
</Link>

产品页面的相对路径

"/store/protein"

:

<Link to={product.id}> // <-- no leading slash "/" character
  {product.title}
</Link>