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 = Perf


import 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来获取