安装
npm install react-router-dom -S或yarn add react-router-dom
组件类型
- 使用的时候必须从react-router-dom引入相应的组件
- 组件类型：路由组件、路由匹配组件、导航组件
路由组件
- BrowserRouter 是基于HTML5 history API(pushState、replaceState、popstate)事件
- HashRouter 是基于window.location.hash
路由匹配组件
- Route 有三种属性 component、render、children来渲染对应的内容。当组件已存在时，一般使用component属性。当需要传递参数变量给组件时使用render属性。
- Switch 把多个路由组合在一起
导航组件
- Link
- NavLink 是特殊的Link组件，匹配路径时，渲染的a标签带有active
- Redirect 重定向
路由信息
- useParams 获取动态路由的参数，也就是useRouteMatch.params
- useRouteMatch
console.log(useRouteMatch())
console.log(useParams())
- useHistory，也可用来进行路由跳转
- useLocation
路由守卫
- 通过自定义组件，获取用户登录信息，鉴权，然后跳转到对应的页面 参考文档
自定义Link
Prompt
//有时你想阻止用户
//离开页面。最常见的
//用例是当他们输入了一些数据时
//但尚未提交，以及
//你不想让他们失去它。
// 可以通过react-router-dom提供的Prompt组件
<Prompt
when={isBlocking}
message={location =>
`Are you sure you want to go to ${location.pathname}`
}
/>
当你在输入框输入内容，且未点击提交就切换页面，会弹出prompt组件
404页面
// 写在路由的最后面就可以了
<Route path="*">
<NoMatch />
</Route>
query数据
function useQuery() {
return new URLSearchParams(useLocation().search);
}
let query = useQuery();
