React-router

react的路由

首先安装reacr-router npm install react-router --save,会自动安装上最新的版本4.1.1,但是新的react-router里面没有hashHistory,很烦，所有我自己是在webpack.json里面写上"react-router": "^2.8.1" 然后cnpm install 安装这个版本

创建页面

• ./app/containers/app.jsx 所有页面的外壳
• ./ap/containers/Home/index.jsx 主页
• ./ap/containers/List/index.jsx 列表页
• ./ap/containers/Detail/index.jsx 详情页
• ./ap/containers/NotFound/index.jsx 404

App.jsx
app.jsx里面的代码是这样子的，但是在正式的项目开发中，这个文件很有用，而且这个文件和react-router也会结合的很好

exprot default class App extends React.Component{    render(){        return(            <div>            //<p>header</p>            {this.props.children}            //<p>footer</p>            </div>        )    }}

this.props.children表示组件的所有子节点

this.props.children的值有三种可能：当组件没有子节点，它是undefined；如果有一个子节点，数据类型是object;如果有多个子节点，数据类型就是array。所以处理this.props.children的时候要多注意

React提供了一个方法React.children来处理this.props.children。可以用react.children.map 来遍历子节点。

配置router
创建./app/router/routeMap.jsx 文件

import {Router,Route,IndexRoute} from "react-router"export default class RouteMap extends React.Component{    updataHandler(){        console.log('每次router变化之后都会触发')    }      render(){        return(            <Router history={this.props.history} onUpdate={this.updataHandler.bind(this)}>                <Route path="/" component={App}>                    <IndexRoute component={Home}/>                    <Route path="list" component={List}/>                    <Route path="detail/:id" component={Detail}/>                    <Route path="*" component={NotFound}/>                </Route>               </Router>        )    }}

使用router

./app/index.jsx 在这里写我们定义的RouterMap组件

import React from "react"import {render} from "react-dom"import {hashHistory} from "react-router"import "./static/css/common.less"//之前的性能检测import Perf from "react-addons-perf"window.Perf = Perfimport RouteMap from "./router/routeMap"render(    <RouteMap history={hashHistory}/>,    document.getElementById('root'))

这里的hashHistory(地址栏：localhost:8080/#/list)与之对应的还有一个browserHistory(地址栏：localhost:8080/list)，但是这个需要服务器端的支持

页面跳转

1.从一个页面跳转到另一个页面,有两种方法,第一种是`<Link>` 跳转

import React from "react";import {Link} from "react-router"//PureRenderMixin性能优化  然后在组件中引用import PureRenderMixin from "react-addons-pure-render-mixin"export default class Home extends React.Component{    //优化的代码    constructor(props,context){        super(props,context)        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this)    }    render(){        return(            <div>             这是home页面 <br/>             <Link to="/list">to list</Link>            </div>        )    }}

2.另外一种是使用js跳转

import React from "react"import {hashHistory} from "react-router"export default class List extends React.Component{    render(){          const arr = ["list页面1","list页面2","list页面3"]        return(          <ul>            {arr.map((item,index)=>{                return <li key={index}  onClick = {this.clickHandler.bind(this,index)}>{item}</li>            })}          </ul>        )    }        //js的路由跳转clickHandler(value){    hashHistory.push("/detail/" + value)}}

获取参数
Detail页面需要获取url中的参数，可以用this.props.params.id来获取