React-router v4 路由配置方法

Coding01 发布于2019-08-20 18:30 / 1491人阅读

摘要：使用了约等于才能匹配或者能匹配，所以说是约等于。使用了和才能匹配后续补充这是版本中新添加，主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。

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 等于

import { Router } from "react-router"


import createBrowserHistory from "history/createBrowserHistory"
//
const history = createBrowserHistory()

NativeRouter（给rn使用的）

A 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 ) ( / => / ) 唯一匹配

 
      
              //这里用exact，仅仅是担心location被 path="/"截胡了。

问题（三个问题）

1.如何设置公共的Component

第一种方式

第二种方式(父子嵌套)

 
      
        
        
        {/* {app()} */}

const Parent = ({ match }) => (
  
    
    
    
  
);

这种情况 bContainer就是是公用的Component

2.如何设置getComponent，按需加载

另一篇文章

3.是否有简化写法

npm install --save react-router-config

第一步配置路由

const routes = [
  { component: bContainer,
    routes: [
      { path: "/",
        exact: true,
        component: bContainer
      },
      { path: "/b/b",
        component: bContainer,
        routes: [
          { path: "/b/b/b",
            component: bContainer
          }
        ]
      }
    ]
  }
]

第二步设置路由


      
          {renderRoutes(routes)}

第三步需要在container的render中去调用方法

 
  1111
  {renderRoutes(this.props.route.routes)}

这个优势是可以统一配置，劣势是需要在container中统一调用，但是这个抽出来统一实现，问题也不大，并且还可以解决问题一。

这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。

GPU云服务器云服务器静态路由配置高速通道路由配置简单路由-域名配置 php的路由配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84615.html

项目实践：从react-router v3迁移到v4

摘要：详见对绑定监听事件，把的改变同步到的中用来把的更新同步到中。代码分割版本通过和实现代码分割和动态路由。笔者认为，更符合的组件思想，于是做了一个实践。原文：https://github.com/YutHelloWo... 前言今年3月初发布了react-router v4，相较之前的v3和v2版本做了一个破坏性的升级。遵循一切皆React Component的理念。静态路由变成了动态...

zhangrxiang 2019-08-20 18:36 评论0 收藏0
react-router 升级小记

摘要：前言最近将公司项目的从版本升到了版本，跟完全不兼容，是一次彻底的重写。升级过程中踩了不少的坑，也有一些值得分享的点。没有就会匹配所有路由最后不得不说升级很困难，坑也很多。前言最近将公司项目的 react-router 从 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次彻底的重写。这也给升级造成了极大的困难，与其说升级不如说是对 route...

isLishude 2019-08-21 18:30 评论0 收藏0
[ 一起学React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三个和。的理念上面提到的理念是一切皆组件以下统一称组件。从这点来说的确方便了不少，也迎合一切皆组件的理念。组件是中主要的组成单位，可以认为是或的路由入口。将该标示为严格匹配路由。的属性追加一条。 2019年不知不觉已经过去19天了，有没有给自己做个总结？有没有给明年做个计划？当然笔者已经做好了明年的工作、学习计划；同时也包括该系列博客剩下的博文计划，目前还剩4篇：分别...

tinysun1234 2019-08-23 14:49 评论0 收藏0
ReactRouter升级 v2 to v4

摘要：概述相对于几乎是重写了新版的更偏向于组件化。汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用，那么一定会很快上手新版的。被一分为三。不止是否有意义参考资料迁移到关注点官方文档概述 react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is comp...

JasonZhang 2019-08-20 17:26 评论0 收藏0
todo-list 项目问题总结（使用 react 进行开发）

摘要：项目问题总结这个项目，很简单，前端使用，后端使用进行开发。方便移动端开发。当动画结束后，有一个钩子函数可以使用其他一些功能组件，都是自己尝试去编写的，像日历组件组件组件等。版本的，是没有任何的钩子函数，我就感觉懵逼了。。。 todo-list 项目问题总结这个 todo-list 项目，很简单，前端使用 react，后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql...

shengguo 2019-08-22 15:37 评论0 收藏0