在React项目开发中，react-router-dom是实现前端路由管理的核心工具，除了基础的路由配置外，条件式页面导航和参数传递是实际开发中高频使用的功能，能够满足权限控制、状态联动等场景需求。
条件式页面导航的实现方式
条件式导航指的是根据特定条件（如用户登录状态、权限等级、表单校验结果等）决定是否允许跳转或跳转到不同页面，react-router-dom支持声明式和编程式两种实现方式。
声明式条件导航
声明式导航主要通过<Navigate>组件实现，结合条件判断渲染不同的路由结果。首先需要在项目中安装并引入相关依赖：
// 安装依赖
npm install react-router-dom
// 引入必要组件
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
以下是一个根据用户登录状态控制导航的示例，未登录时自动跳转到登录页：
import React, { useState } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
// 模拟登录状态
const App = () => {
const [isLogin, setIsLogin] = useState(false);
return (
<BrowserRouter>
<Routes>
<Route path="/home" element={
// 条件判断，未登录则跳转到登录页
isLogin ? <div>首页内容</div> : <Navigate to="/login" replace />
} />
<Route path="/login" element={<div>登录页面</div>} />
</Routes>
</BrowserRouter>
);
};
export default App;
编程式条件导航
编程式导航通过useNavigate钩子实现，适合在事件回调、逻辑判断中触发跳转，比如表单提交成功后根据校验结果跳转：
import React from "react";
import { useNavigate } from "react-router-dom";
const LoginPage = () => {
const navigate = useNavigate();
const handleLogin = (username, password) => {
// 模拟登录校验逻辑
if (username === "admin" && password === "123456") {
// 校验通过跳转到首页
navigate("/home");
} else {
// 校验失败提示错误
alert("账号或密码错误");
}
};
return (
<div>
<button onClick={() => handleLogin("admin", "123456")}>登录</button>
</div>
);
};
export default LoginPage;
路由参数传递的常用方案
react-router-dom支持多种参数传递方式，开发者可以根据参数的使用场景选择合适的方法。
路径参数传递
路径参数适合传递必填的标识类参数，比如用户ID、商品ID等，需要在路由配置中定义参数占位符，跳转时拼接参数，目标页面通过useParams获取。
import React from "react";
import { BrowserRouter, Routes, Route, useParams, Link } from "react-router-dom";
// 目标页面获取路径参数
const UserDetail = () => {
const { userId } = useParams();
return <div>当前用户ID：{userId}</div>;
};
const App = () => {
return (
<BrowserRouter>
<Link to="/user/1001">查看用户1001详情</Link>
<Routes>
{/* 定义路径参数占位符 */}
<Route path="/user/:userId" element={<UserDetail />} />
</Routes>
</BrowserRouter>
);
};
export default App;
查询参数传递
查询参数适合传递可选参数，比如分页参数、筛选条件等，跳转时在路径后拼接查询字符串，目标页面通过useSearchParams获取。
import React from "react";
import { BrowserRouter, Routes, Route, useSearchParams, Link } from "react-router-dom";
// 目标页面获取查询参数
const GoodsList = () => {
const [searchParams] = useSearchParams();
const page = searchParams.get("page") || 1;
const category = searchParams.get("category") || "all";
return <div>当前分页：{page}，分类：{category}</div>;
};
const App = () => {
return (
<BrowserRouter>
<Link to="/goods?page=2&category=book">查看图书第二页</Link>
<Routes>
<Route path="/goods" element={<GoodsList />} />
</Routes>
</BrowserRouter>
);
};
export default App;
状态传参
状态传参适合传递复杂对象或不需要暴露在地址栏的参数，跳转时通过state字段传递，目标页面通过useLocation获取。
import React from "react";
import { BrowserRouter, Routes, Route, useLocation, useNavigate } from "react-router-dom";
// 跳转页面
const ListPage = () => {
const navigate = useNavigate();
const handleClick = () => {
// 通过state传递参数
navigate("/detail", {
state: { id: 1001, name: "商品名称", price: 99.9 }
});
};
return <button onClick={handleClick}>查看商品详情</button>;
};
// 目标页面获取state参数
const DetailPage = () => {
const location = useLocation();
const goodsInfo = location.state || {};
return (
<div>
<p>商品ID：{goodsInfo.id}</p>
<p>商品名称：{goodsInfo.name}</p>
<p>商品价格：{goodsInfo.price}</p>
</div>
);
};
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<ListPage />} />
<Route path="/detail" element={<DetailPage />} />
</Routes>
</BrowserRouter>
);
};
export default App;
注意事项
- 使用<Navigate>组件时，replace属性设置为true可以避免跳转后回退到原页面，适合登录跳转等场景。
- 路径参数属于路由的一部分，修改参数会触发路由重新匹配，查询参数修改不会触发路由重新匹配。
- 状态传参的参数在页面刷新后会丢失，如果需要持久化存储，建议结合localStorage等方式使用。
- 编程式导航调用navigate时，如果跳转到当前路由，需要添加replace: true或者配置state避免重复跳转报错。
react-router-dom条件式导航路由参数传递前端路由React修改时间：2026-06-15 02:33:49