React15 - react-router v3 如何在react15项目中进行路由跳转和数据传递

在 React 15 项目中使用 React Router v3 进行路由跳转和数据传递，核心是理解其集中式路由配置和基于 props 的数据流。下面我们分别来看跳转和传参的具体实现。

路由跳转

React Router v3 提供了三种主要的路由跳转方式，你可以根据使用场景灵活选择。

跳转方式	使用场景	示例代码	数据传递支持
<Link> 组件	在视图层声明式地创建导航链接，如菜单、按钮 。	<Link to="/user/123">用户详情</Link>	支持通过 query 或 state 传递数据 。
this.props.router.push	在业务逻辑（如数据请求成功后）或事件处理函数中进行命令式跳转 。	this.props.router.push('/about')	同样支持 query 和 state 传参 。
browserHistory.push	在非React组件（如工具函数、Store）或组件树深层中需要跳转时使用 。	import { browserHistory } from 'react-router'; browserHistory.push('/about')	支持 query 和 state 。

💡 关于 this.props.router：在 React Router v3 中，通过路由直接渲染的组件，其 props 中会自动包含 router 对象，可以直接调用 push 方法 。

数据传递

React Router v3 主要通过三种方式将数据传递给目标组件，它们都挂在组件的 props 上。

1. 动态路由参数 (params)

这是最基本的方式，用于将数据直接嵌入在 URL 路径中，比如资源的 ID 。

• 配置路由：在路由的 path 中使用冒号 : 定义参数。

  <Route path="/user/:userId" component={UserProfile} />
  

• 发起跳转：

  <Link to="/user/123">张三</Link>
  // 或
  this.props.router.push('/user/123')
  

• 目标组件接收：

  // 在 UserProfile 组件中
  render() {
    // 通过 this.props.params 获取
    const { userId } = this.props.params;
    return <div>用户ID: {userId}</div>;
  }
  

2. 查询字符串 (query)

适用于传递非敏感、可选或用于过滤、分页的参数，参数会以明文形式附加在 URL 的 ? 后面 。

• 配置路由：无需在 path 中特殊定义，所有路由默认支持。

  <Route path="/search" component={SearchResults} />
  

• 发起跳转：通过一个对象来指定 pathname 和 query。

  <Link to={{ pathname: '/search', query: { keyword: 'react', page: 1 } }}>搜索</Link>
  // 或
  this.props.router.push({ pathname: '/search', query: { keyword: 'react', page: 1 } })
  

• 目标组件接收：

  // 在 SearchResults 组件中
  render() {
    // 通过 this.props.location.query 获取
    const { keyword, page } = this.props.location.query;
    return <div>搜索关键词: {keyword}, 页码: {page}</div>;
  }
  

3. 状态 (state)

这种方式传递的数据不会显示在 URL 中，类似于 POST 方式，适合传递敏感或体积较大的数据（如表单提交后传递整个对象），但刷新页面后数据会丢失 。

• 配置路由：同样无需特殊定义。

  <Route path="/confirm" component={OrderConfirmation} />
  

• 发起跳转：通过对象中的 state 属性传递。

  const orderData = { orderId: 'xxx', items: [...] };
  <Link to={{ pathname: '/confirm', state: orderData }}>查看订单</Link>
  // 或
  this.props.router.push({ pathname: '/confirm', state: orderData })
  

• 目标组件接收：

  // 在 OrderConfirmation 组件中
  render() {
    // 通过 this.props.location.state 获取
    const orderData = this.props.location.state;
    return <div>订单ID: {orderData.orderId}</div>;
  }
  

传递方式对比

传递方式	数据存放位置	URL 可见性	刷新后是否保留	适用场景
params	URL 路径	是	是	资源 ID、页面标识等核心参数
query	URL 查询字符串	是	是	过滤、搜索、分页等非核心参数
state	内存对象	否	否	表单数据、操作状态等敏感或复杂数据

总结

在 React 15 项目中，React Router v3 的路由跳转和数据传递机制非常清晰：

• 使用 <Link>、router.push 或 browserHistory.push 来触发跳转。
• 通过 params、query 和 state 三种方式，在目标组件中通过 props 获取传递过来的数据，它们分别适用于不同的传参需求 。