当前位置：首页 > news >正文

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

news 2026/3/26 22:34:02

在 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
}