安装
npm i react-router-dom --save
- 特点
- react⼀切皆组件，路由也是组件
- 分布式的配置, 分布在你页面的每个角落
- 包含式配置, 可匹配多个路由
写法
import React from 'react'
import { BrowserRouter} from 'react-router-dom'
export default function RouterSample() {
return (
<div>
<h1>学习react路由</h1>
<BrowserRouter>
<App></App>
</BrowserRouter>
</div>
)
}
<Link to="/">首页</Link>
// to指定跳转去的路径
<Route exact path="/" component={Home}><Route>
// path 配置路径
// component 配置路径所对应的组件
// exact 完全匹配, 只有路径完全一致时才匹配
路由传参&取参
- 用的比较多的两种传参取参方式
- 声明式导航路由配置时配置路由参数
<Route path="/detail/:course" component={Detail}></Route>
<Link to="/detail/react">react</Link>
// 解构路由器对象里的match出来(match获取参数信息)
{ match.params.course }
- 编程式导航式传递参数与获取
- 解构路由器对象获取到导航对象
history(用作命令行导航)
- 通过事件执行
history.push( { pathname: " / ", state: { foo: "bar" } } )传递的参数装载在state里面
- 从路由信息解构出
location(当前的url信息)对象location.state进行获取
嵌套路由及路由重定向
function ClassA() {
return (
<div>
<ul>
<li><Link to="/class/A">详情</Link></li>
<li><Link to="/class/B">编辑</Link></li>
<Route path="/class/A" component={() => <div><h1>详情</h1></div>}></Route>
<Route path="/class/B" component={() => <div><h1>编辑</h1></div>}></Route>
<Redirect to="/class/A"></Redirect>
</ul>
</div>
)
}
