極客react之Ant Design Pro系列快速入門(七)-- 使用新的佈局
定義一個新的佈局
- loayout資料夾定義佈局的js檔案和less樣式檔案
- /common/router.js中定義使用新佈局的路徑
'/data': { component: dynamicWrapper(app, [], () => import('../layouts/DataCenterLayout')), }
- /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>
相關推薦
極客react之Ant Design Pro系列快速入門(七)-- 使用新的佈局
定義一個新的佈局 loayout資料夾定義佈局的js檔案和less樣式檔案 /common/router.js中定義使用新佈局的路徑 '/data': { component: dynamicWrapper(app, [], () => import('..
極客react之Ant 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