React15 - react-router v3 版本在react v15当中的使用

在 React 15 中使用 React Router v3，核心是采用集中式路由配置。你需要在应用顶层使用 <Router> 组件定义好所有路由规则，并通过 history 来同步 URL 与 UI。

下面是一个完整的示例和详细说明。

1. 安装

首先，你需要在项目中安装正确的版本。根据 React 15 的兼容性，安装 React Router v3.x 即可。

npm install --save react-router@3

或者，如果你使用 webpack 并需要 ES6 模块支持：

npm install --save react-router@3.x.x

2. 基础使用示例

这个例子展示了如何在入口文件（如 index.js）中配置和使用路由 。

import React from 'react';
import ReactDOM from 'react-dom';
// 1. 引入必要的组件
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router';

// 2. 定义页面组件
const App = (props) => (
  <div>
    <h1>欢迎来到我的应用</h1>
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/about">关于</Link></li>
      <li><Link to="/users">用户列表</Link></li>
    </ul>
    {/* 嵌套的子组件会在这里渲染 */}
    <div style={{ border: '1px solid black', padding: '10px' }}>
      {props.children}
    </div>
  </div>
);

const Home = () => <h2>首页内容</h2>;
const About = () => <h2>关于我们</h2>;
const Users = (props) => (
  <div>
    <h2>用户</h2>
    {/* 用于渲染用户详情子路由 */}
    {props.children}
  </div>
);
// 路由参数示例 (路径 /users/123)
const UserDetail = (props) => <h3>用户ID: {props.params.userId}</h3>;

// 3. 配置路由规则
//    Router 组件包裹所有路由，history 属性指定导航方式 
ReactDOM.render(
  <Router history={browserHistory}>
    {/* 根路由，路径为 '/' */}
    <Route path="/" component={App}>
      {/* IndexRoute 是当路径精确匹配 '/' 时，在 App 的 this.props.children 处渲染的默认组件  */}
      <IndexRoute component={Home} />
      <Route path="about" component={About} />
      <Route path="users" component={Users}>
        {/* 嵌套路由和动态路径参数 :userId  */}
        <Route path="/user/:userId" component={UserDetail} />
      </Route>
    </Route>
  </Router>,
  document.getElementById('root')
);

3. 核心概念解析

• <Router> 和 history： <Router> 是路由的根组件。你必须给它传递一个 history 属性，让它知道如何监听和操作浏览器地址栏。常用的有 browserHistory (生成如 /about 的真实URL，需要服务器配置支持 ) 和 hashHistory (生成如 /#/about 的URL，无需服务器配置) 。
• 集中式路由：所有路由规则都集中定义在顶层 Router 组件内，通过 <Route> 的嵌套来清晰地反映 UI 的嵌套关系 。
• 嵌套路由与 props.children：父路由组件（如示例中的 App 和 Users）必须通过 {props.children} 来指定子路由组件渲染的位置。当 URL 匹配子路由时，子组件就会被渲染在这里 。
• <IndexRoute>：它就像一个默认的子路由。当你访问父路由的路径时，如果没有 IndexRoute，父组件的 props.children 会是 undefined；有了它，就会渲染指定的默认组件 。
• 动态路径参数 (:paramName)：在 path 中使用冒号可以定义动态参数，例如 /user/:userId。在对应的组件（如 UserDetail）中，可以通过 this.props.params.userId 获取到实际的 ID 值 。
• 导航 (<Link>)：<Link to="/path"> 组件用于在应用中创建可点击的链接，实现声明式的、无刷新的页面跳转，它会自动渲染为 <a> 标签 。

4. 如何处理查询字符串和组件生命周期？

• 查询字符串 (Query String)：对于 URL 中 ? 后面的参数，例如 /users?name=john，你可以在组件中通过 this.props.location.query 来获取。这是一个对象，如 {name: 'john'} 。
• 数据加载：当路由发生变化，特别是同一个路由但查询参数不同时，组件不会重新挂载。你可以利用 componentWillReceiveProps 生命周期方法来监听 location.search 的变化，并在此触发新的数据加载逻辑 。

class ExampleComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    // 检查查询参数是否变化
    if (nextProps.location.search !== this.props.location.search) {
      this.loadData(nextProps.location.search);
    }
  }
  loadData(search) {
    // 根据新的查询参数获取数据
    console.log('加载数据，参数为:', search);
  }
  // ... render
}

总结

对于 React 15 项目，React Router v3 是一个非常稳定且成熟的解决方案。它通过集中配置的方式让路由结构一目了然，其嵌套路由和动态路径参数的特性至今仍被广泛借鉴。