react-router

安装使用react-router

npm install react-router-dom --save

特点

• 秉承react一切皆组件，路由也是组件。
• 分布式的配置，分布在你的页面的每个角落。
• 包含式配置，可匹配多个路由。

使用步骤

1. 引入顶层路由组件包裹根组件，index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDom.render(
    <BrowserRouter>
    	<App></App>
    </BrowserRouter>
    , document.getElementById('root'))

2. 引入Link组件编写路由导航

 <Link to="/">首页</Link>

• to指定跳转去的路径

3. 引入Route组件编写导航配置

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

• path配置路径
• component 配置路径所对应的组件
• exact 完全匹配，只有路径完全一致时才匹配

4. 编写导航对应的component组件

• Switch包裹，只会匹配一个，路由不匹配显示默认的组件

import React, { Component } from 'react'
import { BrowserRouter,  Route, Link, Switch } from 'react-router-dom'
import test from './router01/test'
import test01 from './router01/test01'
import test02 from './router01/test02'

function App() {
    return (
        <div>
            <ul>
                <li>
                    <Link to="/">test</Link>
                </li>
                <li>
                    <Link to="/test01">test01</Link>
                </li>
                <li>
                    <Link to="/test02">test02</Link>
                </li>
            </ul>
            <Switch>
                <Route exact path="/" component={test}></Route>
                <Route path="/test01" component={test01}></Route>
                <Route path="/test02" component={test02}></Route>
                <Route component={test}></Route>
            </Switch>
        </div>
    )
}

class RouterApp extends Component {
    render() {
        return (
            <div>
                <h1>路由测试</h1>
                <BrowserRouter>
                    <App></App>
                </BrowserRouter>
            </div>
        )
    }
}

export default RouterApp

路由的传参取参

一、声明式导航路由配置是配置路由参数（params传参）

• 配置

   <Route path="/test/:course" component={test}></Route>

• 传递

  <Link to="/test/参数">test</Link>
  // 或者
  this.props.history.push('/test/参数')

• 获取
  解构路由器对象里的match

this.props.math.params.course

二、编程式导航传递参数与获取(state传参)

• 路由上无需配置
• 传递

  <Link to={{pathname:'test', state:{course: '参数'}}}>test</Link>
  // 或者
  this.props.location.push({pathname:'test', state:{course: '参数'}})

• 获取：使用this.props.location.state接收参数

this.props.location.state

三、query传参

• 路由上无需配置
• 传递

  <Link to={{pathname:'test', query:{course: '参数'}}}>test</Link>
  // 或者
  this.props.location.push({pathname:'test', query:{course: '参数'}})

• 获取：使用this.props.location.query接收参数

this.props.location.query

路由守卫的实现和使用

• 路由守卫其实就是我们的路由拦截，当我们有一些页面需要登陆之后才有权限去访问这个时候，我们的路由守卫就可以派上用场了。
• react里的路由守卫其实也是一个组件，最后返回的还是Route组件。

// 路由守卫的实现
class RouteGuard extends Component {
    state = {
        isLogin: false // 是否登录
    }

    render() {
        // 解构路由的组件和其他参数
        const { component: Component, ...otherProps } = this.props
        return (
            // 其他参数原样传回去
            // 在render判断是否有权限，有就加载原组件并把参数原样传递进去，没有权限就重定向到登录界面
            <Route
                {...otherProps}
                render={props => (this.state.isLogin ? <Component {...props}></Component> : <Redirect to="/login"></Redirect>)}
            >
            </Route>
        )
    }
}