路由跳转

React Router 提供了三种主要的参数传递方式

方式	使用场景	URL 中可见	刷新后保留	特点
Params	必选参数（如资源 ID ）	✅	✅	路径占位符，如 /user/:id
Search	可选参数（如筛选条件）	✅	✅	查询字符串，如 ?q=react&page=1
State	敏感/临时数据	❌	❌	通过 state 传递，不显示在 URL 中

一、 路由跳转

路遇跳转主要分两种：声明式跳转（ <Link/> 或 <NavLink> ） 和编程式跳转（ 通过 JS 代码触发 ）。例如

1. 声明式跳转

声明式跳转通过 <Link /> 组件实现，三个版本的底层逻辑一致，但 V6 对部分属性进行了调整。

v5 版本

// 基础跳转（路径）
<Link to="/home">首页</Link>

// 带参数查询（ search ）
<Link to="/search?q=who">查询路由</Link>

// 带动态参数（需配合路由配置的路径）
<Link to="/user/earthnut">用户：花生亻</Link>

// 带状态参数（ state ，不会暴露在 URL 中 ）
<Link to="/profile" state={{id: 420}}>简介</Link>

v6 / v7 版本

v6 中 <Link /> 的 to 属性支持对象形式，且 state 被明确为“不暴露在 URL 中的临时数据”

// 基础跳转（路径）
<Link to="/home" >首页</Link>

// 带参数查询（search）
<Link to="/search?q=react" >查找 react</Link>
// 或使用对象形式（更清晰）
<Link to={{pathname: '/search' , search: "?q=react"}}>查找 react</Link>
// 带动态参数 （同 v5 ， 依赖路由配置）
<Link to="/user/earthnut" >用户：花生亻</Link>
// 到状态参数
<Link to="/profile"  state={{id: 420}}>简介</Link>

2. 编程式跳转

编程式跳转通过访问（修改）路由的 history 对象实现。

v5 编程式跳转

v5 依赖路由组件的 props.history 或高阶组件 withRouter

// 类组件 ： 通过 `props.history` （需路由包装）
class MyComponent extends React.Component {
  handleClick = () => {
    // 页面跳转
    this.props.history.push('/home');
    // 页面更替
    this.props.history.replace('/login');
    // 页面回退
    this.props.history.goBack();
  };
}

// 函数组件：通过 `withRouter`  高阶组件
import { withRouter } from 'react-router';

function MyComponent({ history }) {
  const handleClick = () => history.push('/home');

  return <button onClick={handleClick}>首页</button>;
}

export default withRouter(MyComponent);

v6 / v7 编程式跳转

v6 移除了 props.history 和 withRouter ，改用 useNavigate() 钩子

import { useNavigate } from 'react-router';

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

  const handleClick = () => {
    navigate('/home'); //跳转
    navigate('login', { replace: true }); // 替换当前路由
    navigate(-1); // 退一步，海阔天空
    navigate(-2); // 退两步，海角天涯
  };

  return <button onClick={handleClick}>首页</button>;
}

二、 参数传递与获取

参数传递分两种：动态路由参数 （如 /user/:id 中的 id ）和 Query 参数 （如 ?q=react ）。

1. 动态路由参数 （ Path Parameters ）

动态路由参数通过路由路径中的占位符（如 :id ） 定义，获取方式因版本而已。

v5 动态路由

v5 中通过路由组件的 props.match.params 获取

// 路由配置（需包裹在 Router 中）
<Router path="/user/:id" component={User} />;

// 组件内获取
function User(props) {
  const userId = props.match.params.id; // 获取动态参数
  return <div>用户 ID ： 「{userId}」</div>;
}

v6 / v7 动态路由参数

v6 移除了 props.match ，改用 useParams() 钩子

// 路由配置（使用 element 属性 ）
<Route path="/user/:id" element={<User />} />;

// 组件内获取
import { useParams } from 'react-router';

function User() {
  const { id } = useParams();
  return <div>用户 ID ： 「{id}」</div>;
}

2. Query 参数 （Search Parameters）

Query 参数是 [ULR] 中 ? 后的键值对（如 ?q=react&page=1 ），React Router 本身不提供钩子，需手动解析

v5 Query 参数

v5 中通过 props.location.search 获取原始 Query 字符串，需自行解析

// 组件内获取
function Search() {
  /** 如 `?q=react&page=1` */
  const searchStr = props.location.search;
  // 解析
  const params = new URLSearchParams(searchStr);
  const q = params.get('q');
  const page = params.get('page');

  return (
    <div>
      检索： 「{q}」； 当前页面 ： 「{page}」
    </div>
  );
}

v6 / v7 Query 参数

import { useLocation } from 'react-router';

function Search() {
  const location = useLocation();
  const searchStr = location.search;
  const params = new URLSearchParams(searchStr);

  const q = params.get('q');
  return <div>检索：「{q}」</div>;
}

3. State 参数传递与获取

State 参数是通过 navigate 或 <Link /> 的 state 属性传递的临时数据（不暴露在 URL 中）。

v5 State 参数

// 跳转时传递 state
this.props.history.push('/profile', { id: 456 });

// 在组件内获取
function Profile(props) {
  const state = props.location.state;
  return <div>用户 ID ： 「{state.id}」</div>;
}

v6

// 跳转时传递 state
navigate('/profile', { state: { id: 420 } });

// 组件内获取
import { useLocation } from 'react-router';

function Profile() {
  const location = useLocation();

  const state = location.state;
  return <div>用户 ID ： 「{state.id}」</div>;
}

三、对比表格

功能	v5	v6	v7
编程式跳转	props.history.push/withRouter	useNavigate() 钩子	同左
动态参数获取	props.match.params	useParams() 钩子	同左
Query 参数解析	props.location.search + 手动解析	useLocation + 手动解析	同左
State 参数获取	props.location.state	useLocation().state	同左
路由配置	<Route component={...} />	<Route element={...} />	同左