一、介绍及安装使用react-router
1.特点
①路由也是组件
②分布式配置，在各个组件都可以使用
③包含式配置，可匹配多个路由
2.安装使用
npm install react-router-dom --save
使用步骤：
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> ) }
原文：https://www.cnblogs.com/yinwenjie/p/12249095.html