React路由

react的路由几种模式，是什么？

两种路由模式:
一种是Hash路由模式，用的是HashRouter组件
一种是历史路由模式，用的是BrowserRouter组件绑定

react路由常用的组件有哪些？

HashRouter或BrowserRouter配置路由模式
Route 定义路由组件映射关系
Redirect 设置路由重定向
NavLink 或者Link 页面路由跳转
Switch 路由匹配，当path匹配到一个component之后，将不会再想下继续匹配，提高了程序效率

react路由传参的方式有哪些？

//隐士参数传递
(1) this.props.history.push({ pathname : '/user' ,query : {id:100}})
this.props.location.query.id 获取query传递的参数据，刷新数据不在
(2) this.props.history.push({ pathname:'/user',state:{id: 1000 } }) this.props.location.state.id 获取state的数据,刷新数据还在
3. url传参方式 () history.location.search获取数据比较麻烦，得自己解析
4. 动态路由定义 /detail/:id => /detail/100 => location.match.params中接受的参数是 {id:100}

react路由跳转的方式有哪些?

声明式导航:
使用NavLink或者Link跳转， to属性后面跟字符串或者跟对象
编程式导航跳转:
props.history.push(url) 跳转页面可以返回上一页，保留历史记录
props.history.replace(url) 跳转页面，清空历史记录
props.history.go(num) 返回第几个页面

 react路由嵌套如何配置？

1. 配置父组件的路由地址，在父组件中配置子组件的路由映射关系
2. 关闭父组件路由配置exact属性，避免精准匹配
3. 父组件路由地址作为子组件路由地址的开始的一部分。比如父组件是/index 子组件应该是/index/子组件地址

 withRouter是干什么的？

不是所有组件都直接与路由相连（比如拆分的子组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props.history跳转页面了或者接受参数了

react-roter-dom中V5和V6区别？

参考链接: react 中router v6 与 v5 区别 - 哔哩哔哩

• V5中Switch换成Routes标签，
• V5中exact属性没有了，V6默认是精准匹配
• V5中的component属性，V6用的element，element属性是组件标签
• V6中重定向导航组件换成Navigate
• V6中路由嵌套直接采用组件包裹的方式，可以不适用path绝对路径，
• V6中的 相当于vue中router-view
• 获取参数和Hooks方法的变化
• props获取V6中props值没有参数数据，必须采用Hooks的路由获取数据。
• withRouter在V6版本中也被去掉了。