實際企業開發中 React 路由的配置

2021-10-02 08:06:12 字數 2754 閱讀 1222

1. 配置路由入口元件

import react,

from

"react"

;import

from

"react-router-dom"

;import

from

"react-router-config"

;import routecomponent from

"../router/index"

;// 配置路由入口元件

class

pageos

extends

component

render()

<

/switch>

<

/browerrouter>)}

}export

default pageos;

2. 路由檔案的配置
檔案目錄:src>router>index.js

import displaycomponent from

"../container/searchbtn/displaycomponent"

;import aboutcomponent from

"../container/about/aboutcomponent"

;import handlecomponent from

'../container/handle/handlecomponent'

;import stuinfocomponent from

'../container/stuinfo/stuinfocomponent'

;import bookscomponent from

"../container/bookscar/bookscomponent"

;import userlogincomponent from

"../common/user/userlogin/userlogin"

;import playcomponent from

"../container/rangeplay/playcomponent"

;import hookexercisecomponent from

"../container/hookexercise/hookexercise"

;/**

* 路由配置

* @type

*/const routecomponent =[,

,,,,

,]}]

;export

default routecomponent;

3. 路由的使用
檔案目錄: src>container>handle>handlecomponent.js

import react,

from

'react'

;import

from

'react-router-config'

import

from

"antd"

;const

= menu;

const

= layout;

class

handlecomponent

extends

component)}

aboutme=(

)=>)}

stuinfo=(

)=>)}

bookcar=(

)=>)}

playrange=(

)=>)}

clickbtn=(

)=>)}

render()

style=

}>

mode=

"inline"

defaultselectedkeys=

defaultopenkeys=

style=

}>

key=

"sub1"

title=

>

"1" onclick=

>搜尋<

/menu.item>

"2" onclick=

/menu.item>

"3" onclick=

>學生資訊<

/menu.item>

"4" onclick=

>購物車<

/menu.item>

"5" onclick=

/menu.item>

"6" onclick=

>hook練習<

/menu.item>

<

/submenu>

<

/menu>

<

/sider>

}>

}>

home<

/breadcrumb.item>

list<

/breadcrumb.item>

<

/breadcrumb.item>

<

/breadcrumb>

}>

<

/content>

<

/layout>

<

/layout>

<

/layout>

<

/section>);

}}export

default handlecomponent;

想要了解更加詳細的**過程可以參照我的github

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

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

Git 在 實際開發 中的實際流程

master 通常只是用於對外發布專案的新版本 代替單一的 master,日常開發應該在另一條分支上完成,我們把開發用的分支叫做 develop 專案正式發布後難免會出現 bug,這時就需要建立乙個分支,進行 bug 的修補 hotfix 應該從 master 中分離出來,bug 被修補後,再合併到...

react中js跳轉路由

1 要引入redirect import from react router dom 2 定義乙個flag this.state 3 render裡面判斷flag 來決定是否跳轉 if this.state.loginflag 4 要執行js跳轉 通過js改變loginflag的狀態 改變資料以後會...