1. 程式人生 > >極客react之Ant Design Pro系列快速入門(七)-- 使用新的佈局

極客react之Ant Design Pro系列快速入門(七)-- 使用新的佈局

定義一個新的佈局

  1. loayout資料夾定義佈局的js檔案和less樣式檔案
  2. /common/router.js中定義使用新佈局的路徑
    '/data': {
       component: dynamicWrapper(app, [], () => import('../layouts/DataCenterLayout')),
     }
  3. /router.js路由轉發時使用載入該佈局
    const DataLayout = routerData['/data'].component;
         return (
         <LocaleProvider locale={zhCN}>
         <ConnectedRouter history={history}>
             <Switch>
             <Route path="/user" component={UserLayout} />
             <AuthorizedRoute
                 path="/sys"
                 render={props => <ModuleLayout {...props} />}
                 authority={['admin', 'user']}
                 redirectPath={getQueryPath('/user/login', {
                 redirect: window.location.href,
                 })}
             />
             <AuthorizedRoute
                 path="/data"
                 render={props => <DataLayout {...props} />}
                 authority={['admin', 'user']}
                 redirectPath={getQueryPath('/user/login', {
                 redirect: window.location.href,
                 })}
             />
             <AuthorizedRoute
                 path="/"
                 render={props => <BasicLayout {...props} />}
                 authority={['admin', 'user']}
                 redirectPath={getQueryPath('/user/login', {
                 redirect: window.location.href,
                 })}
             />
             
             </Switch>
         </ConnectedRouter>
         </LocaleProvider>

相關推薦

reactAnt Design Pro系列快速入門-- 使用佈局

定義一個新的佈局 loayout資料夾定義佈局的js檔案和less樣式檔案 /common/router.js中定義使用新佈局的路徑 '/data': { component: dynamicWrapper(app, [], () => import('..

reactAnt Design Pro系列快速入門-- 使用echarts

使用echarts 安裝echarts和react的echarts模組 npm install --save echarts 匯入echarts // 引入 ECharts 主模組 import echarts from 'echarts/lib/echa

3分鐘搭建Ant Design Pro前端開發環境 MyClouds的前端選型

開發十年,就只剩下這套架構體系了! >>>   

React Native入門列表元件的使用(2)關於FlatList的一切

前言 在上一篇部落格中瞭解了列表元件的相關內容,主要是靜態的展示了一個列表資料,瞭解了ScrollVIew,FlatList和SectionList的基本用法,本篇文章就深入的瞭解一個常用的一個列表元件FlatList的用法! 屬性 新增頭部元件

ant-design-mobile框架踩坑

一直在用ant.design桌面版,現在退出了移動版,必須研究一下,但是這不看不要緊,一看就遇到了好多坑,好多坑··· 1.根據官方文件,使用dva腳手架生成專案目錄,這樣簡單一些,如果你喜歡自己建立資料夾的感覺,你也可以自己建立自己的目錄結構。由於是試驗可用

全棧開發HTML快速入門

ack enter 提示 其他 red tle 顯示圖片 val password 一、HTML 是什麽? HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言,而是一種標記語言 (markup lan

02 React快速入門——this的指向和資料修改問題

問題描述:       在react學習中,通過定義一個按鈕,然後為此按鈕繫結一個事件,此事件主要的功能就是使用者點選按鈕,就會在相應的頁面增加一個item選項。在程式碼層面來說,在程式碼裡的state下的list會增加一個數據,如下所示:  

01 React快速入門——使用迴圈時對於‘key’報錯處理

問題描述:       在剛開始接觸react學習的時候,編寫一個小功能時,使用了map來迴圈一個數組中的資料,輸出到前端頁面,程式碼除錯執行後正常顯示,但是開啟控制檯卻發現有一條關於“key”的報錯訊息,詳細資訊如下:     &

06 React快速入門——使用css樣式

      在react中元件使用樣式主要有兩種方式:內聯式和外聯式。下面分別介紹兩種方式:       一、內聯式       使用內聯樣式,和html中差不多,不多在此處需要注意的是,通過sty

05 React快速入門——react中優化程式碼

      在之前的文章中,react程式碼的書寫有很多冗餘,所以接下來對程式碼進行一下優化。       首先優化的是關於this指向這一塊的程式碼,我們不必在每次的繫結後面加bind(this)語句,只需在建構函式裡做處理就可以

04 React快速入門——元件拆分

問題描述:       在目前存在的例項中,程式碼結構如下圖所示:        在index.js中引入了TodoList.js中定義的元件來實現頁面上的一個簡單佈局,一個輸入框和一個按鈕,通過點選按鈕來依次將

03 React快速入門——實現從一個輸入框中新增完資料後此輸入框內容清除的功能

功能描述:       我們在一個輸入框輸入內容,然後點選新增按鈕,此輸入框的內容就會新增到頁面上,但是此輸入框中還存在上次輸入的內容,我們想在每次輸入新增完成之後,此輸入框中的內容就會清除,如圖:      

【Kaggle-MNIST路】自定義程式結構

簡述 這一篇跟這個系列的其他文章不一樣,這個是重新安排下程式結構 結構如下: 其中model這個模型專門放模型就好了 model/init.py中不用寫就好了。 model/CNN.py中的內容 模型是基於之前的【Kaggle-MNIS

【TeeChart Pro ActiveX教程】:使用函式

下載TeeChart Pro ActiveX最新版本 在上一篇文章中,我們介紹到了在Teechart Pro ActiveX中的功能特點和新增功能,今天我們接著講定義資料來源、功能期間和週期樣式 (一)定義資料來源 上一節中的示例重點介紹如何使用Datasource通過程式碼填充Function.S

【TeeChart Pro ActiveX教程】:使用函式

下載TeeChart Pro ActiveX最新版本 功能型別 1 功能特點 TeeChart Pro功能是一個系列,幾乎可以是任何系列型別,應用代數函式,資料來源是另一個圖表系列。 所有函式都派生自Teefunction類並繼承TeeFunction的Period屬性。 TeeCh

Spring Boot 2.0 WebFlux 上手系列課程:快速入門

02:WebFlux 快速入門實踐 Spring Boot 2.0 spring.io 官網有句醒目的話是: BUILD ANYTHING WITH SPRING BOOT Spring Boot (Boot 顧名思義,是引導的意思)框架是用於簡

JavaFX入門使用FXML建立使用者介面

本教程展示了使用JavaFX FXML的好處,JavaFX FXML是一種基於XML的語言,它提供了構建與程式碼的應用程式邏輯分開的使用者介面的結構。 如果您從一開始就開始使用本文件,那麼您已經瞭解瞭如何使用JavaFX建立登入應用程式。在這裡,您使用FXML建立相同的

JavaScript 系列部落格

JavaScript 系列部落格(八) 前言 本篇部落格介紹頁面節點概念、文件結構以及如何使用 js 操作文件節點還有事件 target 以及 BOM 操作。 節點 dom與dom屬性 // DOM: 文件物件模型 => 提高給使用者操作document obj的標準介面 // DO

深度學習筆記——理論與推導Structured Learning【Structured SVM】

Separable case 1. 定義: 2. 用來計算weight的Structured Perceptron演演算法: 那麼面對很多個y,是否可以順利在有限次內找到weight呢?答案是可以的,況且只需要(R/δ)^2次,R是同一個x

《Hadoop》"踽踽獨行"Hadoop的偽分散式叢集搭建

在上一章我給大家介紹了Hadoop的單節點叢集本地模式的搭建,在這一章中,我們來了解一下Hadoop偽分散式叢集的搭建與用途。 一、Hadoop偽分散式叢集(pseudo distributed cluster) 1、簡介 hadoop的pseudo distributed&n