【原】react-router專案實戰
摘要:
react-router相對於flux和redux來說,比較好容易理解一點和容易入門一點。這個是根據我之前的一個專案,然後我用react+react-router+webpack重新寫的。
不過沒有全部寫完。只寫了一部分。不過用來實戰已經足夠了。
不過由於這個專案我主要是用來學習react-router,所有有些地方沒必要用路由的我還是用了。所以如果要拿去用,這點要注意。
還有就是這個demo不是很完善,需要自己去完善一下。尤其是一些目錄結構,由於當時沒考慮好。所以可以稍加完善
注意點:此demo是根據react-router 1.0版本來寫的。之前版本的用法我沒有學過,是直接就學這個版本的。所以如果語法上跟各位的有區別的話,那應該是版本不同所導致的。
當然,大家學習的話應該最好也以1.0版本來學,因為1.0版本相對來說是比較新和穩定的。而且拋棄了很多以前舊的語法,所以和以前版本的語法是有點區別的。目前好像正在出2.0了。技術的更新真的不是一般的快啊
為什麼要用路由?
個人理解的話,就前端而言,路由還是因為單頁面應用時代的帶來而衍生出來的。當url發生變化時,路由相應的做出一些相應,從而來保證目前的url和要展示的介面一一對應好。
效果圖如下:類似於微商城的一個網頁。點選頁尾的不同位置,可以切換不同的頁面。
入口檔案: render/app.js
1 import React from 'react' 2import { render } from 'react-dom' 3 import { Router, Route, IndexRoute, Link, IndexLink } from 'react-router' 4 import { createHistory, useBasename } from 'history' 5 6 7 import App from '../component/app.js' 8 import Mall from '../component/routers/mall/mall.js' 9 import Circle from '../component/routers/circle/circle.js' 10import CircleType from '../component/routers/circle/circleType.js' 11 import My from '../component/routers/my/my.js' 12 import MyNav from '../component/routers/my/myNav.js' 13 import MyUserCenter from '../component/routers/my/userCenter.js' 14 import MemberClub from '../component/routers/my/memberClub.js' 15 import Index from '../component/routers/index/index.js' 16 import Type from '../component/routers/index/type.js' 17 import CircleTip from '../component/routers/circle/circleTip.js' 18 import CircleSay from '../component/routers/circle/circleSay.js' 19 20 const history = useBasename(createHistory)({ 21 basename: '/React-Router' 22 }); 23 24 {/** {this.props.children} 非常重要**/} 25 {/** 思考:首頁也有其他分路由,怎麼配**/ } 26 render(( 27 <Router> 28 <Route path="/" component={App}> 29 <IndexRoute component={Index} /> 30 31 <Route path="/type/:typeName" component={Type} /> 32 33 <Route path="/mall" component={Mall}> 34 <Route path="type/:typeName" component={Type} /> 35 </Route> 36 37 <Route path="/my" component={My}> 38 <IndexRoute component={MyNav} /> 39 <Route path="userCenter" component={MyUserCenter} /> 40 <Route path="memberClub" component={MemberClub} /> 41 </Route> 42 43 <Route path="/circle" component={Circle}> 44 <IndexRoute component={CircleType} /> 45 <Route path="tip/:tipName" component={CircleTip} /> 46 <Route path="say" component={CircleSay} /> 47 </Route> 48 49 </Route> 50 </Router> 51 ), document.getElementById('index'))
基本上所有的檔案都集中在這裡了。所以這個檔案是入口檔案,通過不同的hash值來呼叫不同的元件,從而讓url的變化和介面的變化相對應。
這裡將一個個的介紹react-router屬性的作用。這裡的介紹花的篇幅可能會比較多,因為搞懂了這裡,也就基本搞懂react-router了。
1、<Route path="/" component={App}>
這一句是所有路由的父集,也就是最高階的位置。路由裡面的東西為什麼可以換來換去呢。就是在這個元件裡面來切換的;
這個app裡面的核心程式碼如下: .. /component/app.js //這裡是./component/app 和 ./render/app.js是兩個不同的檔案來的 !!!
return ( <div className="mp_wrap bui_wrap"> {/**主螢幕**/} <div className="mp_pagebox_home"> {/**這裡面的內容會被子路由給代替**/} {this.props.children} {/**公共頁尾**/} <div className="mp_page_footer"> <Footer /> </div> {/**公共頁尾**/} </div> {/**主螢幕**/} </div> )
裡面的 {this.props.children} 這句話是核心。它告訴頁面,它的子集都在這裡展示。所以,每次我們點選切換不同的url,看到不同內容的變化,
其實是這裡面一直替換來替換去而已。沒有替換掉的就是那個Footer元件,因為那個是頁尾用來導航的:
裡面的程式碼如下:(程式碼被簡化,具體看原始碼)
./component/router/publicComponent/footer.js
1 const Footer = React.createClass({ 2 3 render: function() { 4 5 return ( 6 <div className="bui_avg_sm_4 bui_ta_c bui_bgc_lgray bui_ptb_6" > 7 {/**使用IndexLink,可以讓首頁的連結不會一直處於啟用狀態**/} 8 <IndexLink to="/" styles={styles.link} activeStyle={styles.activeLink}>教程</IndexLink > 9 <Link to="/circle" styles={styles.link} activeStyle={styles.activeLink}>烘培圈</Link> 10 <Link to="/mall" styles={styles.link} activeStyle={styles.activeLink}>商城</Link> 11 <Link to="/my" styles={styles.link} activeStyle={styles.activeLink}>我的</Link> 12 </div> 13 ); 14 15 } 16 })
這裡通過reac-router提供的Link來進行路徑的跳轉。
這裡有個注意點:IndexLink,就是預設顯示哪個連結高亮,不然的話預設的首頁的連結狀態就一直處於高亮狀態。通過style,以及activeStyle來切換高亮時的樣式
2、IndexRoute的作用
想象一下當 URL 為 /
時,我們想渲染一個在 App
中的元件。不過在此時,App
的 render
中的this.props.children
還是 undefined,也就是說裡面是空的。
所以我們要讓它預設顯示首頁的資訊
。這種情況我們可以使用 IndexRoute
來設定一個預設頁面。
看什麼的29行程式碼:
<Route path="/" component={App}>
<IndexRoute component={Index} />
可以看看這裡的程式碼,讓url沒有連結到其他路由時,預設顯示Index這個元件裡面的內容
3、路由匹配原理 :
巢狀關係:
中文網的解釋:React Router 使用路由巢狀的概念來讓你定義 view 的巢狀集合,當一個給定的 URL 被呼叫時,整個集合中(命中的部分)都會被渲染。
巢狀路由被描述成一種樹形結構。React Router 會深度優先遍歷整個理由配置來尋找一個與給定的 URL 相匹配的路由。
什麼意思呢。上面的入口檔案中,可以看到,其他路由都是最外層那個app(也就是這個<Route path="/" component={App}>)的子路由,其他路由都是巢狀在這裡面。
當url變化是,它裡面的{this.props.children}都會替換,也就是所謂的整個集合的命中部分都會被渲染。
路徑語法:
中文網原文:
路由路徑是匹配一個(或一部分)URL 的 。大部分的路由路徑都可以直接按照字面量理解,除了以下幾個特殊的符號:
:paramName
– 匹配一段位於/
、?
或#
之後的 URL。 命中的部分將被作為一個引數()
– 在它內部的內容被認為是可選的*
– 匹配任意字元(非貪婪的)直到命中下一個字元或者整個 URL 的末尾,並建立一個splat
引數
<Route path="/hello/:name"> // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)"> // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*"> // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
如果一個路由使用了相對路徑
,那麼完整的路徑將由它的所有祖先節點的路徑
和自身指定的相對路徑
拼接而成。使用絕對路徑
可以使路由匹配行為忽略巢狀關係。
聽起來比較頭暈,可以這樣理解,就是正常的url匹配模式就是一條 斜線+路勁名。比如跳到個人中心 <Route path="/my" component={My}>,如果要傳值:就類似這樣 <Route path="tip/:tipName" component={CircleTip} />
其實就這樣理解就行了。不然會把自己搞的很暈。
繼續前面的入口檔案 render/app.js
通過前面的瞭解,我們的頁面在最開始的url的時候有了一個預設的元件 index,當我們要跳轉的時候,我們可以通過url的不同來呼叫不同的元件。
比如個人中心,<Route path="/my" component={My}>,當識別到你的url是/my 時,就呼叫My這個元件。
可以看下圖:方框內,不同路由就把對應的裡面的內容給替換掉。
子路由下還有子路由的情況
如果在my這個路徑下,我還有子路由怎麼辦呢?就像點選我的頁面,點選頭像,可以跳轉到個人中心那種。方法如下:
<Route path="/my" component={My}> <IndexRoute component={MyNav} /> <Route path="userCenter" component={MyUserCenter} /> <Route path="memberClub" component={MemberClub} /> </Route>
在my這個路徑下,我還有userCenter,memberClub。比如你點選頭像,就會跳轉到這樣的url http://localhost:3200/#/my/userCenter?_k=t18l2p
{My} 這個元件的內容如下:
var Content= React.createClass({ render(){ return ( <div> {this.props.children} </div> ) } }) module.exports= Content
裡面的{this,props.children}也是注意點。用來替換它子元件的內容。可以這麼理解,只要你是父元件,都有一個 {this.props.children}來裝載替換子元件的內容
注意點:
因為/my是父路由,所以它的寫法跟最外層的app那個路由時類似的,所以也要設定一個預設顯示的頁面,也就是IndexRouter。
這裡我就預設顯示MyNav這個元件,不然裡面是什麼都沒有的。這點初學時會經常忘記。切記切記!!!
路由之間引數的傳參:
為了演示引數的傳遞,我將一個tab的切換弄成了路由之前的傳值,實際應用中沒有必要。只是為了演示而已,在./render/app.js的第31行
<Route path="/type/:typeName" component={Type} />
跳轉到了/type/:typeName這裡,並呼叫對應的{Type}元件,為它傳了一個typeName的值,所以我們在傳值時可以這樣
在跳轉到type時,後面著一個你要傳遞的值。
<Link to="/type/餅乾"> <p className="icon icon1"></p> <p className="bui_ta_c bui_tc_gray">餅乾</p> </Link>
那我要獲取到傳遞的值怎樣做呢,可以這樣,在{Type}元件中。
const { typeName } = this.props.params
其中params就是引數的意思。這樣我們就可以在需要使用引數的地方來使用我們的引數了。
暫時就介紹到這裡了。主要是搞懂了./render/app.js裡面的內容和相對應的一些知識,也就基本搞懂路由了。其他地方的用法都是類似的。
參考連結:
備註:再次強調一下,我的這個實戰目錄結構不好,如需拿去專案中使用,記得把專案結構建好一點。另外,有誤指出,歡迎指出。多多交流
相關推薦
【原】react-router專案實戰
摘要: react-router相對於flux和redux來說,比較好容易理解一點和容易入門一點。這個是根據我之前的一個專案,然後我用react+react-router+webpack重新寫的。 不過沒有全部寫完。只寫了一部分。不過用來實戰已經足夠了。 不過由於這個專案我主要是用來學習react-ro
【原】react中如何使用jquery外掛
react的思想是虛擬dom,提倡最好較少dom的操作,可是我們在寫網頁的時候,有些複雜的互動還是離不開jquery外掛的。而且當你把jquery直接拿來用的時候,你會發覺會報錯,要麼是找不到那個外掛,要麼就是沒有報錯,但是就是不能用。尤其是使用webpack打包後,如果將外掛一起打包,那可能會出錯。
【原】個人java專案經驗總結
寫在前面的話 -“雖然我之前沒做過xxx,不過用xxx應該很簡單。” -“沒做過就別說很簡單!” 目錄 一、運算子,基本型別和四則運算 1.1 負數的餘數,如何優雅地避免陣列下標越界 1.2 你確定你的if判斷式裡是'=='而不是=? 二、類,介面的設計 2.1 引數列
【前端】react學習階段總結,學習react、react-router與redux的這些事兒
行程 clas 目前 webpack body src 控制 return 體驗 前言 借用阮一峰的一句話:真正學會 React 是一個漫長的過程。 這句話在我接觸react深入以後,更有感觸了。整個react體系都是全新的,最初做簡單的應用,僅僅使用react-to
【一起來學React】React-Router學習
在web下我們一般都使用react-router-dom,相比於react-router多了一些DOM操作方法,你可以嘗試單獨安裝react-router-dom,看依賴包裡面是不是會包含了react-router,本文就記錄下react-router-dom一些筆記(文章中ap
【原】SVN中如何給專案打基線
打基線就是給被打基線的東西加一個標識,然後在這些東西已經有了變化形成了新的版本後,還能看到打基線的時候這些東西的原來的樣子,從而可以對其進行追蹤和版本隔離。 在專案管理中,打基線主要是在專案進入另一個階段時把上一階段的東西打個標識,從而也作為下一階段的開始。
【稀飯】react native 實戰系列教程之自定義原生UI元件
上一節,講了關於RN的自定義原生模組,本節是關於自定義原生UI元件,學習完本節,你將瞭解到原生UI元件的開發流程,以及js如何向native傳送命令和native如何向js傳送事件。 原生UI元件之VideoView視訊播放器開發 React Nativ
【轉自阮一峰老師】React Router中IndexRoute元件的用法
IndexRoute 元件 下面的例子,你會不會覺得有一點問題? <Router> <Route path="/" component={App}> <Route path="accounts" component={Accou
【ssm個人部落格專案實戰01】SSM環境搭建
前言 今天開始就做一個個人部落格實戰專案了,首先就專案環境的搭建,萬丈高樓平地起。這篇 部落格主要講解基於maven的ssm專案整合。 1、ssm系統架構 整合步驟 第一步: MyBatis和Spring整合,通過Spring管理mapp
【ssm個人部落格專案實戰08】部落格的分頁顯示以及模糊查詢,刪除。
前言 我在這裡給大家道個歉,樓主因為畢業季拍畢業照 找工作事情比較多,所以部落格實戰給拉下來了,對不起大家,這只是暫時的拉下,樓主是不會放棄的。 1、上篇回顧 在上一節中我們是完成了部落格的回臺部分,現在我需要在前臺拿到回臺傳來的資料並且給以顯
【ssm個人部落格專案實戰03】左側導航選單功能實現
先說一下具體的功能就是當我們點選左側選單選項時,右側主介面會顯示對應的內容。 也就是說每當我們點選左側導航選單就等於打開了一個新的頁面只不過它是選項卡的形式顯示在center中。 開啟easyUI API手冊搜尋 tabs 由於每一個選單選項單
【java】itoo項目實戰之hibernate 懶載入優化性能
bsp xtra extra pda 程序 前端框架 外連接 獲取 轉換成 在做itoo 3.0 的時候,考評系統想要上線,就開始導入數據了,僅僅導入學生2萬條數據,可是導入的速度特別的慢。這個慢的原因是由於導入的時候進行了過多的IO操作。可是導入成功之後,
【原】Sql Server 2008---安裝時卸載Visual Studio
studio ima ext 一段 image 控制面板 選擇 應用 技術 由於數據庫連接不上,所以卸載數據庫,然後安裝的時候出問題報錯,結果是因為vs, 所以就有了卸載vs這一步。某些圖片借用一下。 1. 打開電腦中的控制面板--程序和功能 2.找到要卸載的軟件,但
【java】itoo項目實戰之hibernate 批量保存優化
新的 hibernate 缺點 try 實戰 lis 插入 entity man 在itoo中。基本上每一個系統都有一個導入功能,大量的數據填寫進入excel模板中。然後使用導入功能導入的數據庫中,這樣能夠大大的提高工作效率。那麽導入就涉及到了批量保存數據庫的
【原】Http-用getInputStream()或者getParameterMap()獲得Post請求的數據
數據 clas data ons 找到 clu 類的屬性 瀏覽器 比較 【前言】 最近在寫一個接口,寫好以後想測試,自己寫ajax(Post方法)來調用接口倒是可以用action所在類的屬性的get/set方法獲得數據。但是不只是頁面的ajax會調用這個接口,還有外系統會調
【原】shell編寫一個簡單的jmeter自動化壓測腳本
image tac vbo 用戶數 osx dot png das uvc 在公司做壓力測試也挺長時間了,每次測試前環境數據準備都需要話費較長時間,所以一直在考慮能不能將整個過程實現自動化進行,於是就抽空寫了一個自動化腳本,當然這個腳本目前功能十分簡陋,代碼也不完善,很有很
【原】無腦操作:Windows 10 + MySQL 5.5 安裝使用及免安裝使用
界面 圖標 ini文件 字符集設置 exe 可能 mon rem 選擇 本文介紹Windows 10環境下, MySQL 5.5的安裝使用及免安裝使用 資源下載: MySQL安裝文件:http://download.csdn.net/detail/lf19820717/
【原】The Linux Command Line - Redirection
report tee edi each new linux c pattern ext rom ● cat - Concatenate files● sort - Sort lines of text● uniq - Report or omit repeated line
【原】The Linux Command Line - Processes
all task rep shutdown ack port report proc name ps - report a snapshot of current processes top - display tasks job - list active jobs bg
【原】unique/swap【不甚清楚】
wap .cn nbsp cnblogs images 技術分享 png 分享 .com 【原】unique/swap【不甚清楚】