React Router v6 重定向详解
React Router v6 的重定向机制与之前的版本有显著区别。v5 使用 useNavigate Hook 和 Navigate 组件，分别用于编程式和声明式重定向。本文将详细介绍 v6 中的重定向方法及最佳实践。
1. 声明式重定向：Navigate 组件
Navigate 组件用于声明式重定向，通常直接在路由组件或需要根据条件重定向的位置使用。
基本示例：
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
const Home = () => 主页
;
const About = () => 关于我们
;
const NotFound = () => 404 - 页面未找到
;
const App = () => {
return (
);
};
export default App;
说明:
-
Navigate组件执行重定向。当用户访问/old-page时，会自动跳转到/about。 -
to属性指定重定向目标路径。
Navigate 组件的关键属性：
-
to: 重定向目标 URL 或路径。 -
replace: 设置为true时，会替换浏览器历史记录中的当前条目，用户无法返回之前的页面。默认为false。
2. 编程式重定向：useNavigate Hook
useNavigate Hook 用于在 React 组件中以编程方式进行导航或重定向，常用于表单提交、任务完成或条件判断后的重定向。
表单提交后重定向示例：
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const LoginForm = () => {
const [username, setUsername] = useState('');
const navigate = useNavigate();
const handleSubmit = (event) => {
event.preventDefault();
// 此处进行身份验证逻辑...
// 登录成功后重定向到仪表盘
navigate('/dashboard');
};
return (
);
};
export default LoginForm;
说明:
-
useNavigateHook 返回一个navigate函数，用于导航到不同的路由。 - 表单提交并登录成功后，用户将被重定向到
/dashboard路由。 -
navigate函数同样支持replace属性：
navigate('/dashboard', { replace: true });
3. 条件重定向
根据特定条件执行重定向，例如身份验证状态或其他逻辑判断。
基于身份验证的重定向示例：
import React, { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';
const ProtectedPage = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
// 检查身份验证状态，例如从 localStorage 或 API 获取
const authToken = localStorage.getItem('authToken');
setIsAuthenticated(!!authToken);
}, []);
if (!isAuthenticated) {
return 欢迎访问受保护页面
;
};
export default ProtectedPage;
说明:
-
ProtectedPage组件检查localStorage中的authToken来判断用户是否已登录。 - 未登录则使用
Navigate组件重定向到登录页面。
4. 通配符路由处理无效路由
使用通配符路由 * 处理用户访问无效或未定义路由的情况 (404 页面)。
404 页面重定向示例：
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
const Home = () => 主页
;
const About = () => 关于我们
;
const NotFound = () => 404 - 页面未找到
;
const App = () => {
return (
);
};
export default App;
说明:
- 通配符路由
*捕获所有未匹配的路由。 - 将所有无效 URL 重定向到
/404路由，并显示“页面未找到”信息。
总结
React Router v6 提供了灵活的重定向机制，无论是声明式 Navigate 组件还是编程式 useNavigate Hook，都能满足各种重定向需求，使路由管理更加高效便捷。 选择哪种方法取决于你的具体场景和需求。
