国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React-router v4 路由配置方法

Coding01 / 1514人閱讀

摘要：使用了約等于才能匹配或者能匹配，所以說是約等于。使用了和才能匹配后續(xù)補充這是版本中新添加，主要用來做唯一匹配的功能。就是想要在眾多路由中只匹配其中一個路由。

React-Router v4 一. Switch 、Router 、Route三者的區(qū)別
1、Route

Route 是建立location 和 ui的最直接聯(lián)系

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(后續(xù)補充）
3、Switch

這是v4版本中新添加，主要用來做唯一匹配的功能。就是想要在眾多路由中只匹配其中一個路由。

二、v4 版本中路由應(yīng)該如何配置呢？

1.基本配置（這個和v3中基本一致，效果也基本一樣）

匹配 <= location eq.( /b => / + /b ) ( / => / )

2.含Switch 配置

匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配

 
      
              //這里用exact，僅僅是擔(dān)心location被 path="/"截胡了。
問題（三個問題）
1.如何設(shè)置公共的Component

第一種方式

第二種方式(父子嵌套)

 
      

        
        
        {/* {app()} */}
      

    
const Parent = ({ match }) => (
  

    
    
    
  

);

這種情況 bContainer就是是公用的Component

2.如何設(shè)置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
          }
        ]
      }
    ]
  }
]

第二步 設(shè)置路由


      

          {renderRoutes(routes)}

第三步 需要在container的render中去調(diào)用方法

 

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

這個優(yōu)勢是可以統(tǒng)一配置，劣勢是需要在container中統(tǒng)一調(diào)用，但是這個抽出來統(tǒng)一實現(xiàn)，問題也不大，并且還可以解決 問題一。

這個renderRoutes實際是就是用一層Switch和多個Route來包了一層。

?
?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84615.html

相關(guān)文章

  • 項目實踐：從react-router v3遷移到v4

    摘要：詳見對綁定監(jiān)聽事件，把的改變同步到的中用來把的更新同步到中。代碼分割版本通過和實現(xiàn)代碼分割和動態(tài)路由。筆者認為，更符合的組件思想，于是做了一個實踐。 原文：https://github.com/YutHelloWo... 前言 今年3月初發(fā)布了react-router v4，相較之前的v3和v2版本做了一個破壞性的升級。遵循一切皆React Component的理念。靜態(tài)路由變成了動態(tài)...

    zhangrxiang 評論0 收藏0

  • react-router 升級小記

    摘要：前言最近將公司項目的從版本升到了版本，跟完全不兼容，是一次徹底的重寫。升級過程中踩了不少的坑，也有一些值得分享的點。沒有就會匹配所有路由最后不得不說升級很困難，坑也很多。 前言 最近將公司項目的 react-router 從 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次徹底的重寫。這也給升級造成了極大的困難，與其說升級不如說是對 route...

    isLishude 評論0 收藏0

  • [ 一起學(xué)React系列 -- 11 ] React-Router4 (1)

    摘要：中的包中的包主要有三個和。的理念上面提到的理念是一切皆組件以下統(tǒng)一稱組件。從這點來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認為是或的路由入口。將該標(biāo)示為嚴格匹配路由。的屬性追加一條。 2019年不知不覺已經(jīng)過去19天了，有沒有給自己做個總結(jié)？有沒有給明年做個計劃？當(dāng)然筆者已經(jīng)做好了明年的工作、學(xué)習(xí)計劃；同時也包括該系列博客剩下的博文計劃，目前還剩4篇：分別...

    tinysun1234 評論0 收藏0

  • ReactRouter升級 v2 to v4

    摘要：概述相對于幾乎是重寫了新版的更偏向于組件化。汲取了很多思想，路由即是組件，使路由更具聲明式，且方便組合。如果你習(xí)慣使用，那么一定會很快上手新版的。被一分為三。不止是否有意義參考資料遷移到關(guān)注點官方文檔 概述 react-router V4 相對于react-router V2 or V3 幾乎是重寫了, 新版的react-router更偏向于組件化(everything is comp...

    JasonZhang 評論0 收藏0

  • todo-list 項目問題總結(jié)（使用 react 進行開發(fā)）

    摘要：項目問題總結(jié)這個項目，很簡單，前端使用，后端使用進行開發(fā)。方便移動端開發(fā)。當(dāng)動畫結(jié)束后，有一個鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。 todo-list 項目問題總結(jié) 這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發(fā)。數(shù)據(jù)庫使用 Mysql...

    shengguo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<