簡單粗暴的react路由

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

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

我要的是簡單粗暴的路由 習慣了 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.在頁面中使用

有問題可以留言交流

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

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

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

react進階系列 - 高階組件詳解四：高階組件的嵌套使用

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

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

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

Clect 2019-08-19 17:13 評論0 收藏0
react 應用多入口配置 && 實踐總結

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

Sike 2019-08-29 16:57 評論0 收藏0
react 應用多入口配置 && 實踐總結

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

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

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

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