react 路由Redirect元件學習

2021-09-27 09:18:28 字數 1259 閱讀 6158

switch 是route 從上到下匹配,如果有乙個匹配,後面的就不會再繼續匹配了

redirectfrom屬性是位址與from匹配(可以用正則),才會重定向到to屬性指定的路徑

redirectfrom屬性如果沒有,則預設是匹配所有的路徑

import react,

from

'react'

import header from

'../components/homepage/header'

import articlelist from

'./articlelist'

import articledetail from

'./articledetail'

import editorpage from

'./editorpage'

import

from

'react-router-dom'

export

class

homepage

extends

component

constructor

(props)

render()

<

/header>

'/home' exact component=

>

<

/route>

'/home/editor' component=

>

<

/route>

'/home/detail/:id' component=

>

<

/route>

='/home/aaa' to=

'/home'

>

<

/redirect>

='/home/detail' to=

'/home/detail/1'

>

<

/redirect>

='/home/*' to=

'/home/detail/1'

>

<

/redirect>

'/home'

>

<

/redirect>

<

/switch>

<

/div>)}

}export

default homepage

react 動態修改路由 React 動態路由

封裝乙個高階元件,用來實現將普通的元件轉換成動態元件import react from react const asynccomponent loadcomponent class asynccomponent extends react.component catch err this.state...

react學習六 react路由

react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則,在 route 上,有兩個比較重要的屬性,path component link 表示乙個路由的鏈結 就好比 v...

react 動態修改路由 React中的路由設定

在本文中,我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中,我們建立了三個頁面 page 1,page 2,page 3。為了簡化處理,三個頁面的定義類似如下 import react from react function page1 from react r...