React路由全解

1. 当前路由作用在浏览器上

---

1.安装

yarn add react-router-dom

2.引入路由

import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
//BrowserRouter as Router 是给BrowserRouter 起别名为Router 

3.路径匹配(普通路由,特殊路由,严格模式,switch)

- 普通路由+严格模式(exact)

简单案例 : 最后效果,点击导航切换不同内容

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

export default class index extends Component {
    render() {
        return (
            <Router>
                <Link to='/'>首页</Link>
                &nbsp;&nbsp;&nbsp;
                <Link to='/movie'>电影</Link>
                &nbsp;&nbsp;&nbsp;
                <Link to='/theater'>影院</Link>
                <br/>

                <Route exact path="/">first page</Route>
                <Route path="/movie">movies</Route>
                <Route path="/theater">theater</Route>

            </Router>
        )
    }
}

在最外层包一层Router就可以了,嵌套路由里面不用再包裹了

-Switch:

使用Switch的意义在于可以唯一匹配路径,搭配 <Route path="/">hoting</Route> 可以让已进入影院下面就展示hoting

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

export default class theater extends Component {
    render() {
        return (
            <>
                theater
                <br/>
                <Link to='/theater/hoting'>正在热映</Link>
                <Link to='/theater/willing'>即将上映</Link>
                <br/>

                <Switch>
                    <Route path="/theater/hoting">hoting</Route>
                    <Route path="/theater/willing">willing</Route>
                    <Route path="/">hoting</Route>
                </Switch>
            </>
        )
    }
}

4.路由传参

-第一种方式:直接携带参数

index.jsx

theater.jsx通过this.props.match.params.id可以拿到参数

-第二种方式:?形式 通过useLocation

• 函数式组件那参数(这种方式在类组件里面不行)
• 写在类组件中拿参方式
  

5.嵌套路由

6.路由重定向

switch包裹,进行唯一匹配

7.通过render做路由权限

效果展示,点击登录显示职位页面

index.js文件

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom'
import Home from './Home'
import Position from './Position'
import Login from './Login'

export default class index extends Component {
    constructor() {
        super()
        this.state = {
            islogin: false
        }
    }
    handleClick=()=>{
        this.setState({
            islogin:true
        })
    }
    render() {
        return (
            <Router>
                <Link to='/'>首页</Link>
                &nbsp;&nbsp;&nbsp;
                <Link to='/position'>职位</Link>


                <Route exact path="/"><h1>首页</h1></Route>
                <Route path="/position" render={()=>{
                    return this.state.islogin?<Position></Position>:<Login login={this.handleClick}></Login>
                }}>
                </Route>
            </Router >
        )
    }
}

Login.jsx

import React, { Component } from 'react'

export default class Login extends Component {
    render() {
        return (
            <div>
                <button onClick={this.props.login}>登录</button>
            </div>
        )
    }
}

Position.jsx

import React, { Component } from 'react'

export default class Position extends Component {
    render() {
        return (
            <div>
                <h1>职位</h1>
            </div>
        )
    }
}

• 多页面进行路由守卫

import React, { Component } from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link,
    useLocation,
    Redirect,
    Switch
} from 'react-router-dom'

import HomePage from './Home'
import Position from './Position'
import Login from './Login'


const User = () => {
    return <h1>user page</h1>
}


export default class index extends Component {

    constructor() {
        super();
        this.state = {
            islogin: false
        }
        this.routers = [
            {
                path: "/home", component: HomePage, auth: false
            },
            {
                path: "/position", component: Position, auth: true
            }, {
                path: "/user", component: User, auth: true
            }
        ]
    }

    handleLogin = () => {
        this.setState({
            islogin: true
        })
    }


    render() {
        return (
            <Router>
                <Link to="/home">首页</Link> &nbsp;
                <Link to="/position">职位管理</Link> &nbsp;
                <Link to="/user">用户管理</Link>

                <hr />
                {
                    this.routers.map((item) => {
                        return <Route path={item.path} render={() => {
                            return item.auth ? (this.state.islogin ? <item.component></item.component> : <Login login={this.handleLogin}></Login>) : <item.component></item.component>
                        }}>
                        </Route>
                    })
                }

            </Router>
        )
    }
}

8.编程式导航(withRouter)

可以拿到路由上下文的信息,来实现路由跳转

City.jsx

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

class City extends Component {
    handleClick=()=>{
        this.props.history.push(this.props.path)
    }
    render() {
        return (
            <li className={this.props.path===this.props.location.pathname?"selected":''} onClick={this.handleClick}>
                城市
            </li>
        )
    }
    componentDidMount(){
        console.log(this.props)
    }
}
export default withRouter(City)

9.渲染方式

• component的渲染方式:类和函数都可以
• render渲染方式:只能是函数.改成()=>{}可以渲染类组件,有业务逻辑的时候才用render,否则就用component
  
• children 跟render一样 区别在于children不管路径匹不匹配都渲染
  

10.子路由(没有子路由的强概念,主要根据路径来匹配)