我可以使用 usenavigate react 路由器传递数据吗？

当我们使用 React 路由器（如 react-router-dom）时，有时我们需要在不同的组件之间传递数据。在这种情况下，我们可以使用路由器提供的 useNavigate 钩子来传递数据。

使用前请注意：useNavigate 钩子仅在 React 路由器 v6 或更高版本中可用。如果你使用的是较早的版本，请查阅相应的文档。

在路由之间传递数据

当我们想要在两个路由之间传递数据时，可以使用 useNavigate 钩子，如下所示：

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

function ComponentA() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/component-b', { state: { data: 'hello world' } });
  };

  return (
    <div>
      <button onClick={handleClick}>传递数据到 Component B</button>
    </div>
  );
}

function ComponentB() {
  const location = useLocation();
  const data = location.state?.data;

  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

在 ComponentA 中，我们可以通过 useNavigate 钩子获取 navigate 函数，并将数据作为第二个参数传递给它。这个数据将作为一个 state 属性，随着路由跳转一起传递到 ComponentB 中。

在 ComponentB 中，我们可以使用 useLocation 钩子获取路由的位置信息，然后从 location.state 中获取传递过来的数据。

在嵌套路由之间传递数据

如果我们有嵌套的路由结构，我们也可以使用 useNavigate 钩子在这些嵌套的路由之间传递数据。假设我们有以下的路由结构：

<Route path="/parent" element={<Parent />}>
  <Route path="child-a" element={<ChildA />} />
  <Route path="child-b" element={<ChildB />} />
</Route>

在 ChildA 中传递数据到 ChildB，我们可以这样做：

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

function ChildA() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('../child-b', { state: { data: 'hello world' } });
  };

  return (
    <div>
      <button onClick={handleClick}>传递数据到 Child B</button>
    </div>
  );
}

function ChildB() {
  const location = useLocation();
  const data = location.state?.data;

  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

这里的关键是在 navigate 函数中使用相对路径 ../child-b，而不是绝对路径 /parent/child-b。这个相对路径相对于当前的路由位置（即 ChildA）。

总结

使用 useNavigate 钩子可以方便地在 React 路由器中传递数据。我们可以在不同的路由之间或嵌套的路由之间传递数据。请记住，在传递数据时要使用 state 属性，并注意不要暴露敏感信息。