useNavigate、useLocation、useParams

useNavigate:

useNavigate是React Router v6中提供的一个Hook，用于编程式导航到其他路由。它返回一个navigate函数，可以在组件内部调用navigate函数来实现路由跳转。

使用示例:

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

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

  function handleClick() {
    navigate('/about');
  }

  return (
    <div>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

useLocation:

useLocation是React Router v6中提供的一个Hook，用于获取当前路由信息。它返回一个location对象，包含了当前路由的pathname、search、hash等信息。

使用示例:

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

function MyComponent() {
  let location = useLocation();

  return (
    <div>
      <p>Current location: {location.pathname}</p>
    </div>
  );
}

useParams:

useParams是React Router v6中提供的一个Hook，用于获取路由参数。它返回一个params对象，包含了路由参数的键值对信息。

使用示例:

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

function MyComponent() {
  let { id } = useParams();

  return (
    <div>
      <p>Current id: {id}</p>
    </div>
  );
}

注意：在路由配置中，需要使用冒号(:)来指定路由参数，例如：

<Route path="/users/:id" element={<User />} />