React Router 6 useParams() 没有返回最新的路径参数

Question

我在遵循此 guide 之后在 React 路由器 6 中练习递归路由，并且 useParams 函数给了我一些奇怪的行为。每次我 link 到一个新组件时它都会被多次调用 - 通常它是未定义的，通常它不是 return 最新的路径参数。例如，如果我的 path/is/this，它是 returning "is."

getItems() 函数只是 return 一些 json 表示我正在解析的文件树结构，我需要来自 useParams 的可靠 return。

这是我的 app.js:

export function Folder() {
  const { dirName } = useParams();
  const {name, items} = getItems(dirName);
  return (
    <div>
      <h1>{name}</h1>
        <ul>
          {items.filter((dir) => dir.type ==="dir").map(({ name, type }) => (
            <li key={name}>
              <Link to={name}>{name}, {type}</Link>
            </li>
          ))}
        </ul>
        <Routes>
          <Route path={`:dirName/*`} element={<Folder />} />
        </Routes>
    </div>
  );
};


function App() {
    

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate to="/first" />} />
        <Route path="/:dirName/*" element={<Folder />} />
      </Routes>
    </Router>
  );
}

export default App;

Answer 1

我认为与其使用此 getItems 实用程序根据 dirName 路由参数计算 directory 对象条目，不如更改递归呈现 Folder 的方式将当前条目作为道具传递的组件。

示例：

function Folder({ data }) {
  const { dirName } = useParams();
  console.log({ dirName });
  return (
    <>
      <h1>{data.name}</h1> // <-- same as dirName
      <ul>
        {data.items.map((item) => (
          <li key={item.name}>
            {item.type === "file" && (
              <>
                {item.name}, {item.size}
              </>
            )}
            {item.type === "dir" && (
              <>
                <Link to={item.name}>
                  {item.name}, {item.type}
                </Link>
                <Routes>
                  <Route path=":dirName/*" element={<Folder data={item} />} />
                </Routes>
              </>
            )}
          </li>
        ))}
      </ul>
    </>
  );
}

为初始路线播种。

<Routes>
  <Route path="/*" element={<Navigate to="/top" />} />
  <Route path="/:dirName/*" element={<Folder data={directory[0]} />} />
</Routes>

React Router 6 useParams() 没有返回最新的路径参数

React Router 6 useParams() is not returning the most recent path param

reactjs

react-router