這篇文章帶給大家的內容是關於react路由的簡單用法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
我要的是簡單粗暴的路由
習慣了 vue-router 路由的用法，再用react-router總覺得挺麻煩的。
那麼就自己封裝一個吧
1.封裝多層級路由的狀況 －－檔案名稱為routerView.js
import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
return <switch>{
props.routes.map((item, index)=>{
console.log(item.path);
return <route>{
if (item.children){
return <item.component></item.component>
}else{
return <item.component></item.component>
}
}}></route>
})
}<redirect></redirect>
}</switch>
}登入後複製
登入後複製
2.定義路由清單物件 — ———檔案名稱為index.js
import React from 'react';
// 一级路由
import Tab from '../routes/TabPage';
import Detail from '../routes/Detail';
// 二级路由
import Rank from '../routes/RankPage';
import Search from '../routes/SearchPage'
import Index from '../routes/IndexPage';
export default {
routes: [{
path: '/tab',
component: Tab,
children: [{
path: '/tab/index',
component: Index
},
{
path: '/tab/rank',
component: Rank
},
{
path: '/tab/search',
component: Search
}]
},
{
path: "/detail",
component: Detail
}]
}登入後複製
登入後複製
3.在全域掛載
#4.在頁面中使用
有問題可以留言交流
無尾熊閱讀前端團隊
文章詳情
##############################################################
#################bug##########################################1111
######11####
發佈於
##############
##############
之後註解
·
作用內使用 6 分鐘
#
3#
##########################################################################
#######
#######
#######
#######
#######
############我想要的是簡單粗暴的路線######習慣了 vue-router 路由的用法，再使用react-router總是覺得自己挺麻煩的。 ######那麼就自己封裝一個吧######1.封裝多層級路由的狀況 －－檔案名稱為routerView.js###
import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
return <switch>{
props.routes.map((item, index)=>{
console.log(item.path);
return <route>{
if (item.children){
return <item.component></item.component>
}else{
return <item.component></item.component>
}
}}></route>
})
}<redirect></redirect>
}</switch>
}登入後複製
登入後複製
###2.定義路由清單物件 — ———檔案名稱為index.js###
import React from 'react';
// 一级路由
import Tab from '../routes/TabPage';
import Detail from '../routes/Detail';
// 二级路由
import Rank from '../routes/RankPage';
import Search from '../routes/SearchPage'
import Index from '../routes/IndexPage';
export default {
routes: [{
path: '/tab',
component: Tab,
children: [{
path: '/tab/index',
component: Index
},
{
path: '/tab/rank',
component: Rank
},
{
path: '/tab/search',
component: Search
}]
},
{
path: "/detail",
component: Detail
}]
}登入後複製
登入後複製
###3.在全域掛載###########################4 .在頁面中使用#####################有問題可以留言交流################## #################################### 檢舉###################### ######################################如果你覺得我的文章對你有用，請隨意讚賞# ########你可能感興趣的###################################### ##評論###
以上是react路由的簡單用法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
