React五——React-router

路由

npm build
cnpm i serve -g
cnpm i [email protected] -S

    bogon:project macbook$ cnpm i [email protected] -S
    ✔ Installed 1 packages
    ✔ Linked 23 latest versions
    ✔ Run 0 scripts
    peerDependencies WARNING [email protected] requires a peer of react@^0.14.0 || ^15.0.0 but [email protected] was installed
    ✔ All packages installed (24 packages installed from npm registry, used 9s, speed 27.27kB/s, json 25(70.88kB), tarball 172.32kB)
    bogon:project macbook$ 
    
npm start

构建

src下新建routes文件夹
创建routes.js文件

    import React, { Component } from 'react'
    import { Router, Route, hashHistory } from 'react-router'
    
    import Index from '../pages/Index'
    import Position from '../pages/Position'
    import Search from '../pages/Search'
    import Mine from '../pages/Mine'
    
    class App extends Component {
        render() {
            return(
                
                    
                     //索引
                        
                        
                        
                    
                
            )
        }
    }
    
    export default App

创建默认组件Index.js
src/pages/Index.js
创建子组件 进行路由跳转
import React, { Component } from 'react'

class Mine extends Component {
    render() {
        return(
            
mine
        )
    }
}

export default Mine


壳：index.js
import React, { Component } from 'react'
import {Link} from 'react-router'

class Index extends Component {
    render() {
        return(
            

                

                    职位
                    搜索
                    我的
                
                

                    {this.props.children}
                
            
        )
    }
}

export default Index

高亮

职位

传参

（1）传：
    搜索
    收：
    constructor(props){
        super(props)
        console.log(this.props.location.query.name)
    }
（2）传:
    我的
    收：
    constructor(props){
        super(props)
        console.log(this.props.params.id)
    }
    
   'mine/*'
   'mine(/:id)'

redirect

    
    
    


职位

路由嵌套

    
    
        {/*  */}
        
        
            
        
        
    
    
    


/position/search的时候会重定向到/search 导航消失 可做详情页

404 免战牌页面

404.js
import React, { Component } from 'react'

class Page404 extends Component {
    render() {
        return(
            
page not found
        )
    }
}

export default Page404

routes.js

    
        
        
        
        
    
       //放到最后

路由守卫

class App extends Component {
    handleEnter(params, replace) {
        console.log('position enter')
        console.log(params)
        replace('/mine')   //路由守卫
    }
    handleLeave(){
        console.log('position leave')
    }
    render() {
        return(
            
                
                    {/*  */}
                    
                     { this.handleEnter(params,replace) } } onLeave = { () => { this.handleLeave() } } path="position/:id" component={Position}>
                        {/*  */}
                        
                    
                    
                
                
                
            
        )
    }
}

IndexRedirect  写到里面
Redirect 写到外面

组件切换的时候生命周期钩子

路由守卫 onEnter onLeave 如上
unmount会被处触发 其他钩子正常