React五——React-router

路由

npm build
cnpm i serve -g
cnpm i react-router@3.0 -S

    bogon:project macbook$ cnpm i react-router@3.0 -S
    ? Installed 1 packages
    ? Linked 23 latest versions
    ? Run 0 scripts
    peerDependencies WARNING react-router@3.0 requires a peer of react@^0.14.0 || ^15.0.0 but react@16.1.0 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(
                <Router history = { hashHistory }>
                    <Route path="/" component={Index}>
                    <IndexRoute component={Position}></IndexRoute> //索引
                        <Route path="position" component={Position}/>
                        <Route path="search" component={Search}/>
                        <Route path="mine" component={Mine}/>
                    </Route>
                </Router>
            )
        }
    }
    
    export default App

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

class Mine extends Component {
    render() {
        return(
            <div>mine</div>
        )
    }
}

export default Mine


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

class Index extends Component {
    render() {
        return(
            <div>
                <div>
                    <Link to={{pathname: '/position',query:{name:'alice'}}}>职位</Link>
                    <Link to="/search">搜索</Link>
                    <Link to="/mine">我的</Link>
                </div>
                <div>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

export default Index

高亮

<IndexLink activeStyle={{color: 'red'}} to='/'>职位</IndexLink>

传参

（1）传：
    <Link activeStyle={{color: 'red'}}  to={{pathname:"/search",query:{name:'alice'}}}>搜索</Link>
    收：
    constructor(props){
        super(props)
        console.log(this.props.location.query.name)
    }
（2）传:
    <Link activeStyle={{color: 'red'}}  to="/mine/3">我的</Link>
    收：
    constructor(props){
        super(props)
        console.log(this.props.params.id)
    }
    
   'mine/*'
   'mine(/:id)'

redirect

<Redirect from='/' to="/position"></Redirect>
<Route path="/" component={Index}>
    <Route path="position" component={Position}/>
    <Route path="search" component={Search}/>
    <Route path="mine/:id" component={Mine}/>
</Route>

<IndexLink activeStyle={{color: 'red'}} to='/position'>职位</IndexLink>

路由嵌套

<Router history = { hashHistory }>
    <Redirect from='/' to="/position"></Redirect>
    <Route path="/" component={Index}>
        {/* <IndexRoute component={Position}></IndexRoute> */}
        
        <Route path="position" component={Position}>
            <Redirect from='/position/search' to="/search"></Redirect>
        </Route>
        <Route path="mine/:id" component={Mine}/>
    </Route>
    <Route path="/search" component={Search}/>
    <Route path="*" component={Page404}></Route>
</Router>

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

404 免战牌页面

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

class Page404 extends Component {
    render() {
        return(
            <div>page not found</div>
        )
    }
}

export default Page404

routes.js
<Router history = { hashHistory }>
    <Route path="/" component={Index}>
        <IndexRoute component={Position}></IndexRoute>
        <Route path="position" component={Position}/>
        <Route path="search" component={Search}/>
        <Route path="mine/:id" component={Mine}/>
    </Route>
    <Route path="*" component={Page404}></Route>   //放到最后
</Router>

路由守卫

<!--安装 cnpm i --save react-mixin@2-->
class App extends Component {
    handleEnter(params,replace) {
        console.log('position enter')
        console.log(params)
        replace('/mine')   //路由守卫
    }
    handleLeave(){
        console.log('position leave')
    }
    render() {
        return(
            <Router history = { hashHistory }>
                <Route path="/" component={Index}>
                    {/* <IndexRoute component={Position}></IndexRoute> */}
                    <IndexRedirect to="/position"></IndexRedirect>
                    <Route onEnter={ ({params},replace) => { this.handleEnter(params,replace) } } onLeave = { () => { this.handleLeave() } } path="position/:id" component={Position}>
                        {/* <Redirect from='/position/search' to="/search"></Redirect> */}
                        <Route path="/search" component={Search}/>
                    </Route>
                    <Route path="mine" component={Mine}/>
                </Route>
                
                <Route path="*" component={Page404}></Route>
            </Router>
        )
    }
}

IndexRedirect  写到<Route/>里面
Redirect 写到外面

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!