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