react实例大众点评（2）react-router配置和页面跳转

router配置

（1）先安装react-router： npm install react-router –save（整个项目全局使用）
安装完成

（2）创建页面
在container层里面创建页面，页面文件夹里面含有sbupage文件夹和index文件。

（3）在container层创建APP.js文件，这是所有界面的入口文件

  import React from 'react';
class App extends React.Component{
    render(){
       return(
           <div>{this.props.children}</div>
              );
    }
}
export default App

（4）创建Router文件夹，在文件夹里创建Routermap.js文件，用来配置页面的路由

import React from 'react';
// 引入路由文件
import {Router,Route,IndexRoute} from 'react-router';
import App from '../containers/App';
import Home from '../containers/Home/index';
import List from '../containers/List';
import Detail from '../containers/Detail';
import NotFound from '../containers/NotFound';
class RouteMap extends React.Component{
    updateHandle(){
        console.log("换了一页")
    }
    render(){
        return(
            <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}>
                <Route path='/' component={App}>
                    <IndexRoute component={Home}/>
                    <Route path='list' component={List}/>
                    <Route path='detail' component={Detail}/>
                    <Route path='*' component={NotFound}/>
                </Route>
            </Router>
        );
    }
}
export default RouteMap;

解释RouteMap中的各个内容
①，先引入各个页面的index组件
②，从安装的react-router中引入Router、 Route 、IndexRoute
③，是路由的最外层包裹；属性history是从外部获取的history用于记载历史页面，onUpdate函数时路由改变时触发的函数
onUpdate触发的函数在控制台看到效果
④，404页面：没有匹配到正确的路由：

⑤，Route的路由是一层一层的route的path拼接起来的
例如 Home层的路由就是：/
List的路由就是：/list

（5）npm start

（6）问题解决
①在首次安装react-router时默认版本是最新版本，在最新版本中的react-router中没有IndexRoute和hashHistory，所以需要安装3.0版本的
npm install react-router@3.0.0 –save

然后在index中引用routeMap.js和hashHistory

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {hashHistory} from 'react-router';
import RouteMap from './Router/routerMap';
ReactDOM.render(
    <RouteMap history={hashHistory}/>
     ,
    document.getElementById('root'));
registerServiceWorker();

hashHistory的用法和browerHistory的用法：hashHistory测试版本；browerHistory服务端版本；本质上两者没有区别
②在此时跑页面时出现router内部文件报错，此时发现是react16版本不兼容react-router3.0
所以将react降级成15版本
降级方法：npm install react@15.4.0；
③此时又会出现react-dom内部文件报错，那么有了前面的经验就会发现是react版本与react-dom版本不相容。所以将react-dom版本降级成15版本。

（6）问题总结
一般在安装的包的内部报错，就是安装的包的版本不兼容

（7）Router形象示意图

---

页面跳转

（1）html的方式跳转
先在组件中引入Link

Import {Link} from ‘react-router’

然后
使用Link标签代替a标签

<Link to=’/list’></Link>

但是最后在页面显示的是a标签。

（2）js跳转

import React from 'react';
import Title from'./subpage/title'
import {Link}  from  'react-router';
import {hashHistory} from 'react-router';
import './subpage/home.css'
class Home extends React.Component{
    change(){
        hashHistory.push('/list')
    }
    render(){
        return(
            <div className='main'>
                <Title/>
                <Link to='/list'>列表项</Link>
                <h3><span onClick={this.change.bind(this)}>js跳转</span></h3>
            </div>
            );
    }
}
export default Home

先引入hashHistory:import {hashHistory} form ‘react-router’;
在需要跳转的标签加上onClick事件
添加事件函数，在函数里使用hashHistory.push(‘需要跳转的路由’)

跳转成功：