- 安装
// 注意 这里使用的是 "react-router": "^2.8.1"版本， 新版本使用方法有改变
npm install react-router --save
- 嵌套
// 新建root.js 作为入口，注意修改package.json 与 webpack.config.js 文件中的配置
// 引入
import {Router, Route, hashHistory} from 'react-router';
export default class Root extends React.Component {
render() {
return (
// 这里替换了之前的 Index ，变成了程序的入口
<Router history={hashHistory}>
<Route component={Index} path="/">
<Route component={ComponentDetails} path="details"></Route>
</Route>
<Route component={ComponentList} path="list"></Route>
</Router>
);
};
}
ReactDOM.render(<Root/>, document.getElementById('example'))
- 跳转
// 引入 Link
import {Link} from 'react-router';
// 使用，类似 a 标签的使用
<ul>
<li><Link to={'/'}>首页</Link></li>
<li><Link to={'/details'}>嵌套的详情页面</Link></li>
<li><Link to={'/list'}>列表页</Link></li>
</ul>
- 跳转传值
// root.js 定义参数加 /:id
<Route component={ComponentList} path="list/:id"></Route>
// 跳转链接直接带参数
<li><Link to={'/list/1234'}>列表页</Link></li>
// 接收参数 list.js 用 this.props.params来接收 定义的 id
<h2>列表页面 ID: {this.props.params.id}</h2>
