React Router

1. 安装

// 注意 这里使用的是 "react-router": "^2.8.1"版本， 新版本使用方法有改变
npm install react-router --save

2. 嵌套

// 新建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'))

3. 跳转

// 引入 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>

4. 跳转传值

// 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>