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

不言

發布： 2019-02-28 13:37:12

轉載

2896 人瀏覽過

這篇文章帶給大家的內容是關於react路由的簡單用法（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我要的是簡單粗暴的路由

習慣了 vue-router 路由的用法，再用react-router總覺得挺麻煩的。

那麼就自己封裝一個吧

1.封裝多層級路由的狀況－－檔案名稱為routerView.js

import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return {
    props.routes.map((item, index)=>{
      console.log(item.path);
      return {
        if (item.children){
          return 
        }else{
          return 
        }
      }}>
    })
  }
  }
}

登入後複製

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.在全域掛載

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

#4.在頁面中使用

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

有問題可以留言交流

無尾熊閱讀前端團隊

文章詳情

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

############################################################## #################bug##########################################1111 ######11#### 發佈於 ############## ##############

簡單粗暴的react路由

之後註解 · 作用內使用 6 分鐘

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

# 3#

########################################################################## ####### ####### ####### ####### ####### ############我想要的是簡單粗暴的路線######習慣了 vue-router 路由的用法，再使用react-router總是覺得自己挺麻煩的。 ######那麼就自己封裝一個吧######1.封裝多層級路由的狀況－－檔案名稱為routerView.js###

import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return {
    props.routes.map((item, index)=>{
      console.log(item.path);
      return {
        if (item.children){
          return 
        }else{
          return 
        }
      }}>
    })
  }
  }
}

登入後複製

###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 .在頁面中使用#####################有問題可以留言交流################## #################################### 檢舉###################### ######################################如果你覺得我的文章對你有用，請隨意讚賞# ########你可能感興趣的###################################### ##評論###