react路由的簡單用法（程式碼範例）

這篇文章帶給大家的內容是關於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####                                                           發佈於                                                                                                                                                                  ##############                                                                                                                                               ##############

                                                                    

簡單粗暴的react路由

• 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>
}

###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中文網其他相關文章！