react 路由巢狀3 x版本

2021-10-02 19:08:39 字數 1667 閱讀 1491

路由巢狀

在乙個路由中載入多個子路由

1、在主入口路由檔案引入子路由

2、將子路由放入對應的父路由內,且子路由名稱是在父路由名字基礎上追加,否則跳轉時會因跳轉路徑問題報錯

>

3、在父路由對應的元件內,新增link標籤設定跳轉,別忘了引入link

4、在父元件中新增

在**新增,子路由元件內容就顯示在**

5、若要在進入到父路由頁面時就顯示乙個子路由元件的內容

將父路由標籤內的指定路由標籤換成

其中:(1)該標籤不用寫路徑名,因此此時路徑已變成父路由的路徑

(2)因此,還要修改父路由對應的元件內的對應的子路由的link中的to屬性值,修改為父路徑+/或

直接為父路徑

**示例:

主入口檔案:

import react ,

from

'react'

;// import user from './user'

import

from

"react-router"

import page from

"./***"

import two from

'./2'

import three from

"./3"

import thre from

"./4"

import thr from

"./5"

class

extends

component

>

"/" component=

>

<

/route>

"/two" component=

>

<

/route>

"/three" component=

>

>

<

/indexroute>

"/three/thr" component=

>

<

/route>

<

/route>

<

/router>

<

/div>)}

}export

巢狀的父路由檔案:

import react,

from

"react"

import

from

'react-router'

// import links from './link'

export

default

class

three

extends

component

<

/div>)}

}

子路由檔案:

import react,

from

"react"

export

default

class

thre

extends

component

}

react巢狀路由

一級路由 class first extends component else 二級路由 class systemrouter extends component else export handle sub routes by passing them in a routes prop to th...

react 3 x路由攜帶引數

路由跳轉寫待引數 1 在主入口的路由路徑中,末尾新增 鍵名 若傳遞多個引數 以 xx xx的形式新增 2 在跳轉的link標籤對應的路徑中,末尾新增 鍵值 其中若傳遞的值是變數 兩種寫法 1 路徑為 內部為引號 2 路徑為 以es6寫法,發反引號和 加大括號是因為解析js語法 若傳遞多個值 兩種寫法...

新手該學習Python2 x版本還是3 x版本

如果你是乙個初學者,或者你以前接觸過其他的程式語言,你可能不知道,在開始學習python的時候都會遇到乙個比較讓人很頭疼的問題 版本問題!是學習python2 還是學習 python3 這是非常讓人糾結的!搜尋一下便會發現python3 和 python2 是不相容的,而且差異比較大,到底學習哪個版...