React Router 6 路由重定向与编程式导航指南

在 React Router 6 中,你可以使用 Navigate 组件、useNavigate hook 来实现路由重定向。下面是一些常见的重定向场景以及对应的实现方式:

一.使用 Navigate 组件

1. 从一个路由重定向到另一个路由

你可以在路由配置中使用 Navigate 组件作为某个路由的元素。例如:

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

const routes = [
  {
   
    path: '/old-path',
    element: <Navigate to="/new-path" replace />,
  },
  {
   
    path: '/new-path',
    element: <NewPathComponent />,
  },
];

在这个例子中，当用户访问 /old-path 时，它会自动重定向到 /new-path，并渲染 NewPathComponent。replace 参数用于控制是替换当前历史记录还是在历史记录中添加一个新条目。

2. 根据条件重定向

你可以使用条件渲染来根据特定条件决定是否重定向。例如，根据用户是否已经认证来决定是否重定向到登录页面:

import {
    Navigate, Outlet } from 'react-router-dom';
import {
    useAuth } from './auth';

const ProtectedRoute =