您的位置:首页 > Web前端 > React

React-router v4 路由配置方法小结

2018-03-23 00:07 951 查看
一. Switch 、Router 、Route三者的区别
1、RouteRoute 是建立location 和 ui的最直接联系2、Routerreact-router v4 中,Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。MemoryRouter、BrowserRouter、HashRouter 等于?
NativeRouter(给rn使用的)A <Router> for iOS and Android apps built using React Native.这里新增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就是是公用的Component2.如何设置getComponent,按需加载另一篇文章 3.是否有简化写法?
第一步 配置路由?
第二步 设置路由?
第三步 需要在container的render中去调用方法?
这个优势是可以统一配置,劣势是需要在container中统一调用,但是这个抽出来统一实现,问题也不大,并且还可以解决 问题一。这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  react-router 4.0