react路由使用（react-router-dom的使用）

安装：

npm install react-router-dom --save

index.js

import React from 'react'
import ReactDom from 'react-dom'

import { BrowserRouter as Router, Route } from 'react-router-dom'

import App from './App'


ReactDom.render(
 // 最外层一定要用Router包裹,写成如下模式
    <Router>
        <Route component={App} path='/'></Route>
    </Router>, document.getElementById('root')
)

App.js

import React, { PureComponent } from 'react'
import { Home, Article, User } from './views'
import NotFound from './views/NotFound'

import { Route, Link, Redirect, Switch } from 'react-router-dom'


export default class App extends PureComponent {
    state = {
        isLog: true
    }
    render() {
        return (
            <div>
                <nav>
                    <h3><Link to='/home'>首页</Link></h3>
                    <h3><Link to='/user'>用户</Link></h3>
                    <h3><Link to='/article'>文章</Link></h3>
                </nav>
                {/* switch匹配到一个就不会往下执行了 */}
                <Switch>
                    {/* component可以用render替換,里面可以做权限校正等等 */}
                    <Route path='/home' component={Home}></Route>
                    <Route path='/article' component={Article}></Route>
                    <Route path='/user' render={(routeProps) => {
                        console.log(routeProps)
                        return this.state.isLog ? <div>请登录</div> : <User {...routeProps} />
                    }}></Route>
                    <Route path='/404' component={NotFound}></Route>

                    {/* 默认显示home导航，相当于重定向,from规定只有从哪个导航才能默认home */}
                    {/* exact继续匹配，要不然就执行这个了，不执行后面的 */}
                    <Redirect to='/home' from='/' exact></Redirect>
                    <Redirect to='/404'></Redirect>
                </Switch>
            </div >
        )
    }
}

view/Article/index.js

view/Home/index.js
view/Users/index.js
view/NotFound/index.js几个页面类似，基本页面，这里着重介绍Article，以及详情

import React, { PureComponent } from 'react'

import { Route, Link } from 'react-router-dom'


import ArticleDetail from './ArticleDetail'
export default class Article extends PureComponent {
    render() {
        return (
            <div>
                {/* 显示传参 */}
                <Link to='/article/1111?type=haha'>文章一</Link>
                {/* 隐式传参 */}
                <Link to={{
                    pathname: '/article/2222',
                    state: {
                        type: "haha"
                    }
                }}>文章二</Link>

                <Route path='/article/:id' component={ArticleDetail}></Route>

               {/*1.query (this.props.history.push({pathname: '/home',query: { name: 'jack', age: 20 }}))   
                2.动态路由/article/1111   3.state（隐式传参）  */}
            </div>
        )
    }
}

view/Article/ArticleDetail.js

import React, { PureComponent } from 'react'

import BackHome from './../../components/BackHome'


export default class ArticleDetail extends PureComponent {
    render() {
        console.log(this.props)
        return (
            <div>
                ArticleDetail文章详情
                {this.props.match.params.id}
                <BackHome></BackHome>
            </div>
        )
    }
}

components/BackHome/index.js

这里介绍withRouter高阶组件

import React, { PureComponent } from 'react'

// withRouter高阶组件，这里需要用到，如果没提公共组件不需要
import { withRouter } from 'react-router-dom'

class BackHome extends PureComponent {
    goHome = () => {
        this.props.history.push({
            pathname: '/home',
            query: { name: 'jack', age: 20 }
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.goHome}>返回首页</button>
            </div>
        )
    }
}

export default withRouter(BackHome)