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 事件）的来保持您的 UI 与 URL 同步。

HashRouter      使用 URL 的哈希部分（即 window.location.hash）的来保持您的 UI 与 URL 同步

index.tsx 中：

 使用路由组件 ：需要使用什么路由自带组件就从 react-router-dom中导入

 路由组件的切换，存在挂载和卸载：所以要优化

导入组件

  组件用于重定向，但是不生效，需要配合switch组件

  组件包裹路由规则，

    其他路由要加 exact ，不加就默认以什么什么开始都可以匹配，不进404页面：但是：exact 精确匹配：有二级路由的时候取消

重定向

 

 404页面

exact 精确匹配：有嵌套路由的取消

c) 声明式导航

  渲染成a标签

渲染成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. 路由参数