摘要:它是官方維護的,事實上也是唯一可選的路由庫。表示的這個部分是可選的。另一種做法是,使用指定當前路由的。而組件會使用路徑的精確匹配。否則用戶直接向服務器請求某個子路由,會顯示網頁找不到的錯誤。
真正學會 React 是一個漫長的過程。
你會發現,它不是一個庫,也不是一個框架,而是一個龐大的體系。想要發揮它的威力,整個技術棧都要配合它改造。你要學習一整套解決方案,從后端到前端,都是全新的做法。
舉例來說,React 不使用 HTML,而使用 JSX 。它打算拋棄 DOM,要求開發者不要使用任何 DOM 方法。它甚至還拋棄了 SQL ,自己發明了一套查詢語言 GraphQL 。當然,這些你都可以不用,React 照樣運行,但是就發揮不出它的最大威力。
這樣說吧,你只要用了 React,就會發現合理的選擇就是,采用它的整個技術棧。
本文介紹 React 體系的一個重要部分:路由庫React-Router。它是官方維護的,事實上也是唯一可選的路由庫。它通過管理 URL,實現組件的切換和狀態的變化,開發復雜的應用幾乎肯定會用到。
本文針對初學者,盡量寫得簡潔易懂。預備知識是 React 的基本用法,可以參考我寫的《React 入門實例教程》。
另外,我沒有準備示例庫,因為官方的示例庫非常棒,由淺入深,分成14步,每一步都有詳細的代碼解釋。我強烈建議你先跟著做一遍,然后再看下面的API講解。
([說明] 本文寫作時,React-router 是 2.x 版,本文的內容只適合這個版本,與最新的 4.x 版不兼容。目前,官方同時維護 2.x 和 4.x 兩個版本,所以前者依然可以用在項目中。2017年3月)
一、基本用法
React Router 安裝命令如下。
$ npm install -S react-router
使用時,路由器Router就是React的一個組件。
import { Router } from "react-router";
render(
Router組件本身只是一個容器,真正的路由要通過Route組件定義。
import { Router, Route, hashHistory } from "react-router";
render((
), document.getElementById("app"));
上面代碼中,用戶訪問根路由/(比如http://www.example.com/),組件APP就會加載到document.getElementById("app")。
你可能還注意到,Router組件有一個參數history,它的值hashHistory表示,路由的切換由URL的hash變化決定,即URL的#部分發生變化。舉例來說,用戶訪問http://www.example.com/,實際會看到的是http://www.example.com/#/。
Route組件定義了URL路徑與組件的對應關系。你可以同時使用多個Route組件。
上面代碼中,用戶訪問/repos(比如http://localhost:8080/#/repos)時,加載Repos組件;訪問/about(http://localhost:8080/#/about)時,加載About組件。
二、嵌套路由
Route組件還可以嵌套。
上面代碼中,用戶訪問/repos時,會先加載App組件,然后在它的內部再加載Repos組件。
App組件要寫成下面的樣子。
export default React.createClass({
render() {
return{this.props.children}
}
})
上面代碼中,App組件的this.props.children屬性就是子組件。
子路由也可以不寫在Router組件里面,多帶帶傳入Router組件的routes屬性。
let routes =
三、 path 屬性
Route組件的path屬性指定路由的匹配規則。這個屬性是可以省略的,這樣的話,不管路徑是否匹配,總是會加載指定組件。
請看下面的例子。
上面代碼中,當用戶訪問/inbox/messages/:id時,會加載下面的組件。
如果省略外層Route的path參數,寫成下面的樣子。
現在用戶訪問/inbox/messages/:id時,組件加載還是原來的樣子。
四、通配符
path屬性可以使用通配符。
// 匹配 /hello/michael
// 匹配 /hello/ryan
// 匹配 /hello
// 匹配 /hello/michael
// 匹配 /hello/ryan
// 匹配 /files/hello.jpg
// 匹配 /files/hello.html
// 匹配 /files/
// 匹配 /files/a
// 匹配 /files/a/b
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg
通配符的規則如下。
(1):paramName
:paramName匹配URL的一個部分,直到遇到下一個/、?、#為止。這個路徑參數可以通過this.props.params.paramName取出。
(2)()
()表示URL的這個部分是可選的。
(3)*
*匹配任意字符,直到模式里面的下一個字符為止。匹配方式是非貪婪模式。
(4) **
** 匹配任意字符,直到下一個/、?、#為止。匹配方式是貪婪模式。
path屬性也可以使用相對路徑(不以/開頭),匹配時就會相對于父組件的路徑,可以參考上一節的例子。嵌套路由如果想擺脫這個規則,可以使用絕對路由。
路由匹配規則是從上到下執行,一旦發現匹配,就不再其余的規則了。
上面代碼中,路徑/comments同時匹配兩個規則,第二個規則不會生效。
設置路徑參數時,需要特別小心這一點。
上面代碼中,用戶訪問/about/me時,不會觸發第二個路由規則,因為它會匹配/:userName/:id這個規則。因此,帶參數的路徑一般要寫在路由規則的底部。
此外,URL的查詢字符串/foo?bar=baz,可以用this.props.location.query.bar獲取。
五、IndexRoute 組件
下面的例子,你會不會覺得有一點問題?
上面代碼中,訪問根路徑/,不會加載任何子組件。也就是說,App組件的this.props.children,這時是undefined。
因此,通常會采用{this.props.children ||
IndexRoute就是解決這個問題,顯式指定Home是根路由的子組件,即指定默認情況下加載的子組件。你可以把IndexRoute想象成某個路徑的index.html。
現在,用戶訪問/的時候,加載的組件結構如下。
這種組件結構就很清晰了:App只包含下級組件的共有元素,本身的展示內容則由Home組件定義。這樣有利于代碼分離,也有利于使用React Router提供的各種API。
注意,IndexRoute組件沒有路徑參數path。
六、Redirect 組件
{/ 從 /inbox/messages/:id 跳轉到 /messages/:id /}
<Redirect from="messages/:id" to="/messages/:id" />
現在訪問/inbox/messages/5,會自動跳轉到/messages/5。
七、IndexRedirect 組件
IndexRedirect組件用于訪問根路由的時候,將用戶重定向到某個子組件。
<IndexRedirect to="/welcome" />
上面代碼中,用戶訪問根路徑時,將自動重定向到子組件welcome。
八、Link
Link組件用于取代元素,生成一個鏈接,允許用戶點擊后跳轉到另一個路由。它基本上就是元素的React 版本,可以接收Router的狀態。
render() {
return
About
Repos
上面代碼中,當前頁面的鏈接會紅色顯示。
另一種做法是,使用activeClassName指定當前路由的Class。
About
Repos
上面代碼中,當前頁面的鏈接的class會包含active。
在Router組件之外,導航到路由頁面,可以使用瀏覽器的History API,像下面這樣寫。
import { browserHistory } from "react-router";
browserHistory.push("/some/path");
九、IndexLink
如果鏈接到根路由/,不要使用Link組件,而要使用IndexLink組件。
這是因為對于根路由來說,activeStyle和activeClassName會失效,或者說總是生效,因為/會匹配任何子路由。而IndexLink組件會使用路徑的精確匹配。
Home
上面代碼中,根路由只會在精確匹配時,才具有activeClassName。
另一種方法是使用Link組件的onlyActiveOnIndex屬性,也能達到同樣效果。
Home
實際上,IndexLink就是對Link組件的onlyActiveOnIndex屬性的包裝。
十、histroy 屬性
Router組件的history屬性,用來監聽瀏覽器地址欄的變化,并將URL解析成一個地址對象,供 React Router 匹配。
history屬性,一共可以設置三種值。
browserHistory
hashHistory
createMemoryHistory
如果設為hashHistory,路由將通過URL的hash部分(#)切換,URL的形式類似example.com/#/some/path。
import { hashHistory } from "react-router"
render(
document.getElementById("app")
)
如果設為browserHistory,瀏覽器的路由就不再通過Hash完成了,而顯示正常的路徑example.com/some/path,背后調用的是瀏覽器的History API。
import { browserHistory } from "react-router"
render(
document.getElementById("app")
)
但是,這種情況需要對服務器改造。否則用戶直接向服務器請求某個子路由,會顯示網頁找不到的404錯誤。
如果開發服務器使用的是webpack-dev-server,加上--history-api-fallback參數就可以了。
$ webpack-dev-server --inline --content-base . --history-api-fallback
createMemoryHistory主要用于服務器渲染。它創建一個內存中的history對象,不與瀏覽器URL互動。
const history = createMemoryHistory(location)
十一、表單處理
Link組件用于正常的用戶點擊跳轉,但是有時還需要表單跳轉、點擊按鈕跳轉等操作。這些情況怎么跟React Router對接呢?
下面是一個表單。
import { browserHistory } from "react-router"
// ...
handleSubmit(event) {
event.preventDefault() const userName = event.target.elements[0].value const repo = event.target.elements[1].value const path = `/repos/${userName}/${repo}` browserHistory.push(path)
},
第二種方法是使用context對象。
export default React.createClass({
// ask for router from context
contextTypes: {
router: React.PropTypes.object
},
handleSubmit(event) {
// ... this.context.router.push(path)
},
})
十二、路由的鉤子
每個路由都有Enter和Leave鉤子,用戶進入或離開該路由時觸發。
<Route path="inbox" component={Inbox}>
<Redirect from="messages/:id" to="/messages/:id" />
上面的代碼中,如果用戶離開/messages/:id,進入/about時,會依次觸發以下的鉤子。
/messages/:id的onLeave
/inbox的onLeave
/about的onEnter
下面是一個例子,使用onEnter鉤子替代
/>
path="messages/:id"
onEnter={
({params}, replace) => replace(`/messages/${params.id}`)
}
onEnter鉤子還可以用來做認證。
const requireAuth = (nextState, replace) => {
if (!auth.isAdmin()) { // Redirect to Home page if not an Admin replace({ pathname: "/" }) }
}
export const AdminRoutes = () => {
return (
)
}
下面是一個高級應用,當用戶離開一個路徑的時候,跳出一個提示框,要求用戶確認是否離開。
const Home = withRouter(
React.createClass({
componentDidMount() { this.props.router.setRouteLeaveHook( this.props.route, this.routerWillLeave ) }, routerWillLeave(nextLocation) { // 返回 false 會繼續停留當前頁面, // 否則,返回一個字符串,會顯示給用戶,讓其自己決定 if (!this.state.isSaved) return "確認要離開?"; },
})
)
上面代碼中,setRouteLeaveHook方法為Leave鉤子指定routerWillLeave函數。該方法如果返回false,將阻止路由的切換,否則就返回一個字符串,提示用戶決定是否要切換。
(完)
原文鏈接:http://www.ruanyifeng.com/blo...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83351.html
稍微整理了一下自己平時看到的前端學習資源,分享給大家。 html MDN:Mozilla開發者網絡 SEO:前端開發中的SEO css 張鑫旭:張鑫旭的博客 css精靈圖:css精靈圖實踐 柵格系統:詳解CSS中的柵格系統 媒體查詢:css媒體查詢用法 rem布局:手機端頁面自適應布局 移動前端開發之viewport的深入理解:深入理解viewport 淘寶前端布局:手機淘寶移動端布局 fl...
摘要:一團隊組織網站說明騰訊團隊騰訊前端團隊,代表作品,致力于前端技術的研究騰訊社交用戶體驗設計,簡稱,騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊,代表作品WebQQ,致力于前端技術的研究 ISUX 騰...
摘要:一團隊組織網站說明騰訊團隊騰訊前端團隊,代表作品,致力于前端技術的研究騰訊社交用戶體驗設計,簡稱,騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊,代表作品WebQQ,致力于前端技術的研究 ISUX 騰...
摘要:一團隊組織網站說明騰訊團隊騰訊前端團隊,代表作品,致力于前端技術的研究騰訊社交用戶體驗設計,簡稱,騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊,代表作品WebQQ,致力于前端技術的研究 ISUX 騰...
摘要:小弟在前端摸爬滾打一段時間,發現前端的比較好的文檔比較分散,特別是中文的,我平時都是收藏在瀏覽器里,以后有好的教程和綜合性的文檔我會更新到這里。小組中文文檔,很全。 小弟在前端摸爬滾打一段時間,發現前端的比較好的文檔比較分散,特別是中文的,我平時都是ctrl+D收藏在瀏覽器里,以后有好的教程和綜合性的文檔我會更新到這里。一則可以做個記錄,防止丟失。二則有需要的朋友可以來我這里找一找。 ...
閱讀 3977·2021-09-22 16:03
閱讀 5311·2021-09-22 15:40
閱讀 1191·2021-09-06 15:02
閱讀 866·2019-08-30 15:53
閱讀 2215·2019-08-29 15:35
閱讀 1105·2019-08-23 18:22
閱讀 3333·2019-08-23 16:06
閱讀 643·2019-08-23 12:27