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的狀態 改變資料以後會...