官方网站 ：https://react-guide.github.io/react-router-cn/

页面做的有层级

一.安装Router

1.首先通过 npm 安装：(最新版)

$ npm install --save react-router

1.安装的版本就是 React Router 2 的版本，所有的使用就会和课程一样了。

npm install react-router@2.8.1

二.编写router.js

import React from 'react';
import ReactDOM from 'react-dom';
import Index from './index';
import {Router,Router,hashHistory} from 'react-router'; export default class Root extends React.Component{render(){return ();}
}

三. 修改以router为项目入口

注意：在· Route 中引入·组件都要 export default

需要注意 Route 绑定的 component 中的 class 有没有添加 export default

import React from 'react';
import ReactDOM from 'react-dom';
import index from './index';
import ComponentList from './components/list';
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={ComponentList} path="list" /></Router>);}
}ReactDOM.render(<Root/>, document.getElementById('example'));

四.创建list.js

import React from 'react';
export default class ComponentList extends React.Component{render(){return {<div><h2>这里是列表页面</h2></div>}；}；}

五.将list.js 引入router.js

import ComponentList from './components/list.js';

六.修改package.json

  "name": "003","version": "1.0.0","description": "","main": "router.js",

七.修改 webpack.config.js

修改入口文件。

  entry: "./src/js/router.js",

八. 定义嵌套页面

1.创建detail.js

import React from 'react';
export default class ComponentList extends React.Component{render(){return (<div><h2>这里是嵌套在首页中的详细页面</h2></div>);};}

2. 修改 router.js

import React from 'react';
import ReactDOM from 'react-dom';
import index from './index';
import ComponentList from './components/list';
import ComponentDetail from './components/detail.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={ComponentDetail} path="details"></Route></Route><Route component={ComponentList} path="list"></Route></Router>);}
}ReactDOM.render(<Root/>, document.getElementById('example'));

3.修改index.js

list是一个单独的页面，details  是嵌套在index里面的页面，为了将detail页面嵌套在index里面，在index页面中添加一个 idv ,在内添加 {this.props.children}

添加

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

<div>{this.props.children}
</div>

访问details后发现details 嵌套在 index页面中

九 . 跳转

有了router 后添加链接进行跳转。

在header 中添加链接

import {Link} from 'react-router'

  return (<header style={styleComponentHeader.header} className="smallFountSize"><h1>这里是头部</h1><ul><li><Link to={'/'}>首页</Link></li><li><Link to={'/details'}>嵌套的详情页面</Link></li><li><Link to={'/list'}>列表页面</Link></li></ul></header>)

十. Router参数的传递

1.点击链接向list页面传入参数

（1）在router里面对list 参数进行定义

  <Route component={ComponentList} path="list/:id"></Route>
// ／：参数名

（2）在header页面中传入参数

<ul><li><Link to={'/'}>首页</Link></li><li><Link to={'/details'}>嵌套的详情页面</Link></li><li><Link to={'/list/1234'}>列表页面</Link></li>
</ul>

（3）在list.js界面中引用传入的参数

import React from 'react';
export default class ComponentList extends React.Component{render(){return (<div><h2>这里是列表页面 Id : {this.props.params.id}</h2></div>);};}

传入多个参数：

/list/1234/desc/...

或者通过 state