react-6 路由 - ts 解决
a) 安装路由库 5 版本的
//下载router
npm i react-router-dom@5//下载去除 路径报错的插件
npm i --save-dev @types/react-router-dom
开启配置 允许导入:tsx:因为项目是基于TS的
b) 相关组件
路由管理组件
BrowserRouter 使用 HTML5 历史记录 API(pushState,replaceState 和 popstate 事件)的<Router>来保持您的 UI 与 URL 同步。
HashRouter 使用 URL 的哈希部分(即 window.location.hash)的<Router>来保持您的 UI 与 URL 同步
index.tsx 中:
使用路由组件 :需要使用什么路由自带组件就从 react-router-dom中导入
路由组件的切换,存在挂载和卸载:所以要优化
导入组件
<Router path=" " component={ } />
<Redirect /> 组件用于重定向,但是不生效,需要配合switch组件
<Switch> </Switch> 组件包裹路由规则,
<Router path="*" component={ NotFound } /> 其他路由要加 exact ,不加就默认以什么什么开始都可以匹配,不进404页面:但是:exact 精确匹配:有二级路由的时候取消
重定向
404页面 <Router path="*" component={ NotFound } />
exact 精确匹配:有嵌套路由的取消
c) 声明式导航
<Link to=" "></Link> 渲染成a标签
<NavLink to=" "></NavLink> 渲染成a标签会在自身的路由地址和浏览器的路由地址匹配成功时,自动添加active类
二级路由跳转
使用的组件需要导入
匹配成功的路由。匹配到哪里就在哪个页面渲染。switch提前占位,后边会被组件替换,路由规则本身就是个动态组件
d) 编程式导航:::方便
this.props.history 负责跳路由
this.props.location 负责存储路由信息(地址,参数)
this.props.match 负责存储路由信息(地址,参数)
props.history.push() //跳转路由
props.history.replace()
props.history.go() //前进 or 后退
props.history.goBack() //后退
props.history.goForward() //前进
解决 TS 报错:
以下包含编程式导航的跳转
事件对象通过button 触发
3. 路由参数