安装路由环境
npm i react-router-dom -S
路由常用的组件
import {
BrowserRouter as Router, // 总路由
// HashRouter // 通过hash值来确定路由
// BrowserRouter // 模拟浏览器的历史记录确定路由
Route, // 路由页面
// Link, // 路由导航
NavLink, // 导航链接（带active激活class）
Redirect, // 重定向
Prompt, // 确认
Switch, // 路由只匹配一个
} from 'react-router-dom'
<meta charset="utf-8">
路由的参数
01 定义指令 Link指令
<Link to="/produce/1">产品1</Link> |
<Link to="/produce/abc">产品abc</Link></div>
02 定义路由
<Route path="/produce/:id" component={Produce}></Route>
03 定义组件-获取路由参数
function Produce({match}){
return (<h1>我是产品:{match.params.id}</h1>);
}
match 匹配的当前路由
isExact: true ,//是否精确匹配
params:{}// 当前路由的参数
path:{} //路由指定的path
url：{}// link 指定的链接地址
history当前路由信息
go() 历史记录跳转
goBack() 历史记录返回
goFoward() 前进
length 历史记录的长度
push() 跳转 有历史记录
replace() 跳转没有历史记录
location 地址信息
---hash #后面的参数
---pathname 当前路由的地址
---search 问号后面的参数
配置路由
QQ截图20200409233619.png
404页面
QQ截图20200409233548.png
子路由
QQ截图20200409233258.png
