react-router

react-router

• 安装使用react-router
• 特点

• 一、声明式导航路由配置是配置路由参数（params传参）
• 二、编程式导航传递参数与获取(state传参)
• 三、query传参

安装使用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'))

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

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

• to指定跳转去的路径

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

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

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

1. 编写导航对应的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>
)
}
}