useNavigate

useNavigate 是 React Router 库中的一个钩子函数，用于在 React 应用程序中进行路由导航。它允许你在组件中执行程序性的路由跳转操作。

导入useNavigate钩子：import { useNavigate } from 'react-router-dom';

在组件中使用：

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

  // 使用 navigate 函数进行路由导航
  function handleClick() {
    // 通过调用 navigate 函数跳转到 '/some-route'
    navigate('/some-route');
  }

  return (
    <button onClick={handleClick}>Navigate</button>
  );
}

我们创建了一个名为 navigate 的变量，它是 useNavigate 的返回值。然后，在 handleClick 函数中，我们调用 navigate 函数，将要导航到的路由路径 '/some-route' 作为参数传递给它，以触发路由导航操作。

useLocation

useLocation 是 React Router 库中的一个钩子函数，用于获取当前路由的位置信息。这个钩子函数允许你在组件中访问当前路由的路径、查询参数、状态等信息，以便根据路由信息来渲染组件或执行与路由相关的操作。

import { useLocation } from 'react-router-dom';
function MyComponent() {
  const location = useLocation();
  return (
    <div>
      <p>当前路径：{location.pathname}</p>
      <p>查询参数：{location.search}</p>
      <p>状态：{location.state}</p>
    </div>
  );
}

在上面的示例中，我们首先导入了 useLocation 钩子，然后在组件中使用它。我们创建了一个名为 location 的变量，它是 useLocation 的返回值，包含了当前路由的位置信息。

我们可以通过访问 location.pathname 来获取当前路由的路径，通过 location.search 来获取查询参数，通过 location.state 来获取状态。这些信息可以用于渲染组件内容，也可以用于执行根据路由信息的不同操作。

• 当前 URL：http://example.com/some-page?query=123
• pathname：/some-page
• search：?query=123
• state：可以设置为一个对象，例如 { user: 'Alice' }

在 React Router 中，state 是一个可选的路由状态对象，它允许你在路由之间传递额外的数据或信息，而不必将这些数据包含在 URL 中。通常情况下，state 用于存储和传递组件之间需要共享的数据，而不会暴露给用户的 URL。

要在 React Router 中使用 state，你可以执行以下步骤：

1. 创建一个包含你要传递的数据的 JavaScript 对象，这将成为 state 的值。
2. 在调用 useNavigate 进行路由导航时，将该状态对象传递给路由对象。

下面是一个示例，演示如何使用 state 在路由之间传递数据：

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

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

  // 创建包含要传递的数据的状态对象
  const dataToPass = {
    user: 'Alice',
    age: 30,
  };

  function handleClick() {
    // 使用 navigate 函数进行路由导航，并将状态对象传递给路由
    navigate('/destination-route', { state: dataToPass });
  }

  return (
    <button onClick={handleClick}>Navigate</button>
  );
}

在上面的示例中，我们首先创建了一个名为 dataToPass 的状态对象，其中包含了要传递的数据。然后，在 handleClick 函数中，我们使用 navigate 函数进行路由导航，并将状态对象传递给路由。这将使数据可以在目标路由组件中通过 useLocation 钩子的 state 属性来访问。

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

function DestinationComponent() {
  const location = useLocation();

  // 获取传递的状态数据
  const stateData = location.state;

  // 使用状态数据
  console.log(stateData.user); // 输出 'Alice'
  console.log(stateData.age); // 输出 30

  return (
    // 渲染组件并使用状态数据
  );
}

使用 state 可以在路由之间传递数据，而不必将数据暴露在 URL 中，这对于传递敏感或大量的数据非常有用。不过要注意，state 数据不会被保留在 URL 中，刷新页面后将丢失。如果需要将数据永久保存，你可能需要考虑其他数据存储和管理方案。