安装使用react-router
npm install react-router-dom --save
特点
- 秉承react一切皆组件,路由也是组件。
- 分布式的配置,分布在你的页面的每个角落。
- 包含式配置,可匹配多个路由。
使用步骤
- 引入顶层路由组件包裹根组件,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'))
- 引入Link组件编写路由导航
<Link to="/">首页</Link>
- 引入Route组件编写导航配置
<Route exact path="/" component={Home}></Route>
- path配置路径
- component 配置路径所对应的组件
- exact 完全匹配,只有路径完全一致时才匹配
- 编写导航对应的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/参数')
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 (
<Route
{...otherProps}
render={props => (this.state.isLogin ? <Component {...props}></Component> : <Redirect to="/login"></Redirect>)}
>
</Route>
)
}
}