React-6-路由
一、介绍及安装使用react-router
1.特点
①路由也是组件
②分布式配置,在各个组件都可以使用
③包含式配置,可匹配多个路由
2.安装使用
npm install react-router-dom --save
使用步骤:
- 引入顶层路由BrowserRouter组件包裹根组件
- 引入Link组件编写路由导航
- 引入Route组件编写导航配置
- 编写导航配置对应的component组件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import React, { Component } from 'react' import { BrowserRouter, Link, Route, Switch } from 'react-router-dom' function Home() { return <div>首页</div> } function Course() { return <div>课程</div> } function Mine() { return <div>我的</div> } function NotFound() { return <div>没有的组件</div> } function App() { return ( <div> <ul> <li><Link to="/">首页</Link></li> <li><Link to="/course">课程</Link></li> <li><Link to="/mine">我的</Link></li> <li><Link to="/notfound">没有的组件</Link></li> </ul> <Switch> <Route path="/" exact component={Home}></Route> <Route path="/course" exact component={Course}></Route> <Route path="/mine" exact component={Mine}></Route> <Route component={NotFound}></Route> </Switch> </div> ) } export default class RouterSample extends Component { render() { return ( <div> <h1>学习react-router</h1> <BrowserRouter> <App></App> </BrowserRouter> </div> ) } }
注:Switch会从上至下最多只匹配一个路由组件
二、react-router的路由传参取参
function Detail({match, location, history}) { return ( <div> 我是{match.params.course}详情页 <button onClick={()=>history.push({pathname: '/', state: {foo: 'bar'}})}>返回首页</button> </div> ) } function Home({location}) { console.log(location) return ( <div> <p>首页</p> {location.state ? <div>从详情页带来的foo: {location.state.foo}</div> : <div></div>} </div> ) }
三、路由守卫
react路由守卫也是一个组件,最后返回的还是Route组件
<RouteGuard path="/mine" component={Mine}></RouteGuard>
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={{pathname: '/login', state: {from: props.location.pathname}}}></Redirect> )}> </Route> ) } }