react路由

react路由使用

安装

yarn add react-router-dom

route组件控制路由

打开入口文件 src/index.js

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

import App from  './App'  // 页面
import Home from './Home' // 页面
import User from './User' // 页面

const routing = (
    <Router>
        <div>
            <Route path="/" component={App}/>
            <Route path="/home" component={Home}/>
            <Route path="/user" component={User}/>
        </div>
    </Router>
)
ReactDOM.render(routing,document.getElementById('root'))

exact精确匹配

上面设置的路由存在一点问题,/ 与 /users 所对应的两个组件 Home、Users 都被渲染。
这是因为 /users 既能够被 /匹配 也能够被 /users 匹配,需要使用 exact 属性进行精确匹配。

<Route path="/" exact component={App}/>

Link组件实现导航

实际上是渲染了一个a标签,使用如下
例如这是在User页面

import React from 'react'
import { Link } from 'react-router-dom'

export default class User extends React.Component{
    render(){
        return(
            <div>
                <Link to="/home">go home</Link>
                <p>this is user page</p>
            </div>
        )
    }
}

Switch组件实现路由不对应跳转404页面

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, BrowserRouter as router, Switch } from 'react-router-dom'

import App from  './App'  // 页面
import Home from './Home' // 页面
import User from './User' // 页面
import ErrorPage from './404' // 404页面

const routing = (
    <Router>
        <div>
            <Switch>
                <Route path="/" component={App}/>
                <Route path="/home" component={Home}/>
                <Route path="/user" component={User}/>
                <Route component={ErrorPage}/>
            </Switch>
        </div>
    </Router>
)
ReactDOM.render(routing,document.getElementById('root'))

路由携带参数

<Route path="/user/:id" component={User}/>

User:

import React from 'react'

export default class User extends React.Component{
    render(){
        console.log(this.props)
        console.log(this.props.match.params.id)
        return()
    }
}

程序化导航(编程式导航),push跳转路由

Hello:

import React from 'react'

export default class Hello extends React.Component{
    goHome = () => {
        this.props.history.push('/home')
    }
    render(){
        return{
            <div>
                <p>Hello Page</p>
                <Button onClick={this.goHome}>Go Home</Button>
            </div>
        }
    }
}