此问题已在此处有答案：

How to pass data from a page to another page using react router（5个答案）
昨天关门了。
我不能将props从它被调用的位置（在我的Route元素中）转移到我的组件。
我试过修改代码并检查它，但仍然返回一个空括号{}，也试过chatGpt的建议，但它也不能给予我一个答案。这就是它所说的：
如果：slug参数没有被传递到TestPage组件，则可能是路由匹配方式有问题。
以下是您可以尝试解决此问题的一些方法：
1.确保在管线路径中正确指定了：slug参数。它应该用一个冒号作为前缀，像这样：/：slug。
1.尝试从URL中删除任何多余的字符（如尾随斜杠），以确保正确匹配路由。
1.如果使用嵌套管线，请确保正确渲染父管线，并将必要的 prop 传递给子管线。
1.如果您使用的是自定义路由组件或自定义路由器，请确保正确实现了该组件或路由器，并且该组件或路由器与路由路径正确匹配。如果这些步骤都无法解决问题，您可能需要提供有关应用代码和结构的更多信息，以便我们更好地了解可能导致问题的原因。
1号不适用，不适用。我不明白，不。3我没有使用嵌套路由withing路由，没有。4、不使用自定义路由。
下面是我的代码：
导出默认App;

import "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { TestPage } from "./components/Test";
import { HomePage } from "./containers/HomePage";
import { ProductListPage } from "./containers/ProductListPage";

function App() {
  return (
    <div>
      <Router>
        <Routes>
        <Route path= '/test/:slug' element={<TestPage />} />
          <Route path=':slug' element={<ProductListPage  />} />
          <Route exact path="/" element={<HomePage />} />
        </Routes>
      </Router>
    </div>
  );
}

下面是productListPage代码：

import { useDispatch } from "react-redux";
import { Layout } from "../../components/Layout";
import { useEffect } from "react";
import { productBySlug } from "../../actions";

export const ProductListPage = (props) => {
  const dispatch = useDispatch();

  useEffect(() => {
    console.log(props);
    dispatch(productBySlug());
  }, [props]);

  return (
    <Layout>
      <p>ProductListPage</p>
    </Layout>
  );
};