本文主要介绍了React-router v4 路由配置方法小结,分享给大家,也给自己留个笔记
一. Switch 、Router 、Route三者的区别
1、Route
Route 是建立location 和 ui的最直接联系
2、Router
react-router v4 中,Router被拆分成了StaticRouter、MemoryRouter、browserRouter、HashRouter、NativeRouter。
MemoryRouter、browserRouter、HashRouter 等于
NativeRouter(给rn使用的)
A
这里新增strict 和 exact
使用了strict location 大于等于path才能匹配,eq path='/one' location='/one/a'能匹配。
使用了exact location 约等于 path 才能匹配,eq path='/one' location='/one'或者 '/one/'能匹配,所以说是约等于。
使用了exact 和 strict location = path才能匹配
StaticRouter(后续补充)
3、Switch
这是v4版本中新添加,主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。
二、v4 版本中路由应该如何配置呢?
1.基本配置(这个和v3中基本一致,效果也基本一样)
匹配 <= location eq.( /b => / + /b ) ( / => / )
2.含Switch 配置
匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配
问题(三个问题)
1.如何设置公共的Component
第一种方式
第二种方式(父子嵌套)
这种情况 bContainer就是是公用的Component
2.如何设置getComponent,按需加载
3.是否有简化写法
第一步 配置路由
第二步 设置路由
这个优势是可以统一配置,劣势是需要在container中统一调用,但是这个抽出来统一实现,问题也不大,并且还可以解决 问题一。
这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。