react useNavigate 路由跳转组件之间传参

在React中使用`useNavigate`进行路由跳转，并传递参数给目标组件，目标组件可以使用`useParams`来接收参数。下面是一些基本的示例和步骤：

1. **使用 `useNavigate` 进行路由跳转**：首先，你可以使用 `useNavigate` 钩子来获取路由导航函数，并使用它来进行路由跳转。

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

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

  const handleClick = () => {
    // 在跳转时传递参数
    navigate('/target-route', { state: { param1: 'value1', param2: 'value2' } });
  };

  return (
    <div>
      <button onClick={handleClick}>跳转到目标路由</button>
    </div>
  );
}

在上述示例中，我们使用 `navigate` 函数来跳转到目标路由，并将参数作为 `state` 传递给目标路由。

2. **在目标组件中使用 `useParams` 获取参数**：在目标路由的组件中，你可以使用 `useParams` 钩子来获取传递的参数。

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

function TargetComponent() {
  const { param1, param2 } = useParams();

  return (
    <div>
      <h1>目标组件</h1>
      <p>参数1: {param1}</p>
      <p>参数2: {param2}</p>
    </div>
  );
}

在这个示例中，我们使用 `useParams` 钩子来解构获取参数 `param1` 和 `param2`。

请注意，你还需要在路由配置中设置路由参数，以便路由能够正确地匹配传递的参数。通常，你可以使用路由库（如React Router）的路由配置来定义带有参数的路由。

例如，使用React Router v6的路由配置可以如下所示：

import { Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" element={<MyComponent />} />
      <Route path="/target-route" element={<TargetComponent />} />
    </Router>
  );
}

这样，当你从 `MyComponent` 跳转到 `/target-route` 路由时，参数将传递给 `TargetComponent` 并可以在那里访问。确保你的路由配置和组件导入正确匹配，以便路由正常工作。