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(‘需要跳转的路由’) 跳转成功：