這篇文章帶給大家的內容是關於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.在頁面中使用
有問題可以留言交流
無尾熊閱讀前端團隊
react.js
javascript
之後註解 · 作用內使用 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>
}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
}]
}
以上是react路由的簡單用法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
