簡單粗暴的react路由

wenshi11019 發(fā)布于2019-08-23 15:31 / 1599人閱讀

摘要：我要的是簡單粗暴的路由習(xí)慣了路由的用法，再用總感覺挺麻煩的。那么就自己封裝一個(gè)吧封裝多級路由的情況文件名為定義路由列表對象文件名為一級路由二級路由在全局掛載在頁面中使用有問題可以留言交流

我要的是簡單粗暴的路由 習(xí)慣了 vue-router 路由的用法，再用react-router總感覺挺麻煩的。 那么就自己封裝一個(gè)吧

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.在頁面中使用

有問題可以留言交流

GPU云服務(wù)器云服務(wù)器簡單路由-域名配置基于路由的webrtc php的路由配置支持linux的路由

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102188.html

相關(guān)文章

react進(jìn)階系列 - 高階組件詳解四：高階組件的嵌套使用

摘要：前面有講到過很多頁面會(huì)在初始時(shí)驗(yàn)證登錄狀態(tài)與用戶角色。這個(gè)時(shí)候就涉及到一個(gè)高階組件的嵌套使用。而每一個(gè)高階組件函數(shù)執(zhí)行之后中所返回的組件，剛好可以作為下一個(gè)高階組件的參數(shù)繼續(xù)執(zhí)行，而并不會(huì)影響基礎(chǔ)組件中所獲得的新能力。前面有講到過很多頁面會(huì)在初始時(shí)驗(yàn)證登錄狀態(tài)與用戶角色。我們可以使用高階組件來封裝這部分驗(yàn)證邏輯。封裝好之后我們在使用的時(shí)候就可以如下： export default w...

LMou 2019-08-20 17:35 評論0 收藏0
簡聊初步嘗試服務(wù)端渲染的一些感想

摘要：多多少少有些不開心的事覺得精力沒有被投入在重點(diǎn)上創(chuàng)業(yè)公司遇到問題變成盲人摸象也許正常吧不過最近這段時(shí)間因?yàn)榉?wù)端的策略調(diào)整我開始做一些服務(wù)端渲染主要的站點(diǎn)是簡聊的登錄頁面整體從切換到了以及做了一些整體項(xiàng)目結(jié)構(gòu)統(tǒng)一的工作或者說一些思考我估計(jì)這多多少少有些不開心的事, 覺得精力沒有被投入在重點(diǎn)上創(chuàng)業(yè)公司遇到問題變成盲人摸象也許正常吧不過最近這段時(shí)間因?yàn)榉?wù)端的策略調(diào)整, 我開始做一些服務(wù)...

Clect 2019-08-19 17:13 評論0 收藏0
react 應(yīng)用多入口配置 && 實(shí)踐總結(jié)

摘要：如果不配置，則將所有的文件都注入。指明生成的路徑，如果不配置就是。配置了新的，避免與第一個(gè)入口相互覆蓋。甚至輸入顯然不存在的，也顯示為的內(nèi)容。這種現(xiàn)象，初步判斷是服務(wù)器把所有請求重定向到了。至此，環(huán)境的多入口問題就解決了。前端根據(jù)自行配置。背景還是之前的那個(gè)項(xiàng)目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動(dòng)端的兼容。考慮到后期的復(fù)雜度，需要做兩套資源。具體的目...

Sike 2019-08-29 16:57 評論0 收藏0
react 應(yīng)用多入口配置 && 實(shí)踐總結(jié)

摘要：如果不配置，則將所有的文件都注入。指明生成的路徑，如果不配置就是。配置了新的，避免與第一個(gè)入口相互覆蓋。甚至輸入顯然不存在的，也顯示為的內(nèi)容。這種現(xiàn)象，初步判斷是服務(wù)器把所有請求重定向到了。至此，環(huán)境的多入口問題就解決了。前端根據(jù)自行配置。背景還是之前的那個(gè)項(xiàng)目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動(dòng)端的兼容。考慮到后期的復(fù)雜度，需要做兩套資源。具體的目...

curried 2019-08-23 12:20 評論0 收藏0
react-redux 開發(fā)實(shí)踐與學(xué)習(xí)分享

摘要：簡介是一個(gè)狀態(tài)管理的庫，由基礎(chǔ)上開發(fā)出來，與的主要區(qū)別是只有一個(gè)，關(guān)于，后文會(huì)詳述。這個(gè)函數(shù)接受四個(gè)參數(shù)，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關(guān)條件，則觸發(fā)的行為。具體定義了項(xiàng)目中觸發(fā)的行為類別，通過屬性來區(qū)別于不同的行為。 redux簡介 redux是一個(gè)js狀態(tài)管理的庫，由flux基礎(chǔ)上開發(fā)出來，與flux的主要區(qū)別是只有一個(gè)store，關(guān)于store，后文會(huì)詳述。在各...

imccl 2019-08-21 16:42 評論0 收藏0