中文 React Router

劉德剛發(fā)布于2019-08-22 11:51 / 686人閱讀

摘要：是你需要渲染到頁(yè)面的匹配規(guī)則的組件舉例最后一個(gè)將會(huì)渲染到內(nèi)。舉例回調(diào)函數(shù)接收兩個(gè)參數(shù)是一個(gè)包含了所有匹配組件的一個(gè)組件，它用來(lái)渲染你的組件。調(diào)用或者是返回將會(huì)阻止阻止事件發(fā)射。

React/Router 文檔已廢棄，關(guān)閉更新，詳情請(qǐng)往這里：

React Router 一個(gè)針對(duì)React而設(shè)計(jì)的路由解決方案、可以友好的幫你解決React components 到URl之間的同步映射關(guān)系。

概覽

在闡明React Router可以幫你解決的問(wèn)題之前我們來(lái)舉一個(gè)沒(méi)有引用React Router 的簡(jiǎn)單例子。

沒(méi)使用 React Router

var About = React.createClass({
  render: function () {
    return About;
  }
});

var Inbox = React.createClass({
  render: function () {
    return Inbox;
  }
});

var Home = React.createClass({
  render: function () {
    return Home;
  }
});

var App = React.createClass({
  render () {
    var Child;
    switch (this.props.route) {
      case "about": Child = About; break;
      case "inbox": Child = Inbox; break;
      default:      Child = Home;
    }

    return (
      
        App
        
      
    )
  }
});

function render () {
  var route = window.location.hash.substr(1);
  React.render(, document.body);
}

window.addEventListener("hashchange", render);
render(); // render initially

在hash值改變的時(shí)候，App 將會(huì)根據(jù)this.props.route 值的改變來(lái)動(dòng)態(tài)渲染 component。
這樣子的做法看起來(lái)很直接，但是這也會(huì)讓整個(gè)應(yīng)用程序變得更加復(fù)雜。
我們可以想想，如果組件 Inbox 有一些內(nèi)嵌的子組件需要根據(jù) 例如 inbox/message/:id 或者 inbox/unread 等這樣的路由規(guī)則做動(dòng)態(tài)渲染的時(shí)候。我們需要一些更加智能的手段來(lái)把路由信息傳遞給我們的App，這樣Inbox 組件可以根據(jù)URL的映射關(guān)系來(lái)控制哪些子組件應(yīng)該需要被渲染。我們的很多組件應(yīng)該根據(jù)URL的規(guī)則來(lái)做動(dòng)態(tài)渲染。在不使用路由規(guī)則的前提下，復(fù)雜一點(diǎn)的路由需求就需要我們寫(xiě)很多條件判斷的代碼去去解決實(shí)RL和層級(jí)組件的同步問(wèn)題。

引入路由

解決復(fù)雜的URL和層級(jí)組件之間的映射關(guān)系式React Router 的核心。我們使用聲明式的方式為我們舉的例子引入路由。我們使用JSX的方式來(lái)進(jìn)行路由的配置，這樣我們可以通過(guò)屬性的方式來(lái)配置頁(yè)面視圖的層級(jí)關(guān)系。
先來(lái)看看路由的配置

var Router = require("react-router");
var Route = Router.Route;

// declare our routes and their hierarchy
var routes = (
  
    
    
  
);

我們刪除掉一些在組件內(nèi)判斷路由邏輯的代碼。然后用替換 .然后代碼變成下面這個(gè)樣子。

var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render () {
    return (
      
        App
        
      
    )
  }
});

最后我們需要監(jiān)聽(tīng)url的變化來(lái)動(dòng)態(tài)渲染應(yīng)用，加入下面的代碼。

  Router.run(routes, Router.HashLocation, (Root) => {
  React.render(, document.body);
});

Root 是 React Router 路由匹配后決定渲染的最高層級(jí)的組件，告訴 RouterHandle 應(yīng)該渲染的內(nèi)容是什么。
組件是不會(huì)被渲染的。只是一個(gè)創(chuàng)建內(nèi)部路由規(guī)則的配置對(duì)象。

接下來(lái)我們?yōu)閼?yīng)用添加更多的UI組件
現(xiàn)在我們計(jì)劃給Inbox UI 添加Inbox message 子組件。首先我們需要添加一個(gè)新的Message組件。然后我們?cè)谠械膇nbox路由下面為 Message 組件添加新的路由，這樣就可以得到嵌套的UI。

var Message = React.createClass({
  render () {
    return Message;
  }
});

var routes = (
  
    
    
      
    
  
);

現(xiàn)在我們?cè)L問(wèn) inbox/message/jKei3c32c的URL就可以匹配到新的路由規(guī)則并可以匹配到App->Inbox->Message 這個(gè)分支下的UI。

獲取url的參數(shù)
我們需要獲取到一些Url的信息，這樣我們可以根據(jù)這些參數(shù)從服務(wù)器端獲取數(shù)據(jù)。我們把交給匹配好的組件稱(chēng)為RouterHandler. RouterHandler 實(shí)例可以獲取到一些非常有用的屬性當(dāng)你渲染組件的時(shí)候。特別是一些從URL動(dòng)態(tài)獲取的參數(shù)信息。比如在我們舉例中得 :id

var Message = React.createClass({
  componentDidMount: function () {
    // from the path `/inbox/messages/:id`
    var id = this.props.params.id;
    fetchMessage(id, function (err, message) {
      this.setState({ message: message });
    })
  },
  // ...
});

嵌套的UI和多層級(jí)的URLs是不需要耦合的。
有了React Router，我們不需要用嵌套UI的方式來(lái)對(duì)應(yīng)多層級(jí)的URL。反過(guò)來(lái)，獲取嵌套組件的UI，我們也不需要有多層級(jí)的URL與它對(duì)應(yīng)。

比如說(shuō)我們有/about/company 這樣的URL，我們不需要嵌套UI組件到About組件中。

var routes = (
  
    
    
  
);

雖然說(shuō)我們的URL是有層級(jí)嵌套的，但是我們UI組件中得 About 組件和 Company 組件卻可以是相鄰展平在同級(jí)目錄的。

現(xiàn)在讓我們往路由中添加url /archive/messages/:id 然后讓該路由嵌套到inbox UI里面，即使這個(gè)URL不跟上層 Router 的URL 嵌套。我們需要做三件事讓匹配下面規(guī)則的路由正常工作。

1、url 要以 / 這樣的絕對(duì)路徑開(kāi)頭，這代表不會(huì)從父路由繼承路由規(guī)則。
2、嵌套在Inbox route 中的router 會(huì)導(dǎo)致UI組件的層級(jí)嵌套。
3、確定你已經(jīng)有必需的動(dòng)態(tài)URL片段，在這里我們只有 :id ,所以處理起來(lái)相當(dāng)簡(jiǎn)單。

var routes = (
  
    
      
      
    
  
);

這就是React Router的核心，應(yīng)用的UI組件是層層嵌套的。現(xiàn)在我們可以讓這些嵌套的UI組件和URL規(guī)則保持同步了。

Route 配置 DefaultRoute

一個(gè)RefaultRoute 是一個(gè)已匹配父組件會(huì)默認(rèn)展示的子組件。
你期望在沒(méi)有子組件被匹配的時(shí)候一個(gè)子RouterHandler總是能夠渲染到頁(yè)面。

Props
handle
RouterHandler 是你需要渲染到頁(yè)面的匹配規(guī)則的組件
name (可選)
當(dāng)你使用linking 和 transitioning 的路由名字

舉例

NotFoundRoute

NotFoundRoute 會(huì)在父組件匹配成功但沒(méi)有一個(gè)同級(jí)組件被匹配的時(shí)候會(huì)被激活。
你可以使用它來(lái)處理不合法的鏈接。

提示
NotFoundRoute不是針對(duì)當(dāng)資源沒(méi)有被找到而設(shè)計(jì)的。路由沒(méi)有匹配到特定的URL和通過(guò)一個(gè)合法的URL沒(méi)有查找到資源是有卻別的。url course/123 是一個(gè)合法的url并能夠匹配到對(duì)應(yīng)的路由，所以它是找到了的意思。但是通過(guò)123 去匹配資源的時(shí)候卻沒(méi)有找到，這個(gè)時(shí)候我們并不像跳轉(zhuǎn)到一個(gè)新的路由，我們可以設(shè)置不同的狀態(tài)來(lái)選軟不同的UI組件，而不是通過(guò)NotFoundRoute 來(lái)解決。

props

handler
RouterHandler 是你需要渲染到頁(yè)面的匹配規(guī)則的組件

舉例

最后一個(gè) NotFoundRoute 將會(huì)渲染到 APP 內(nèi)。第一個(gè)將會(huì)被渲染到Course 內(nèi)。

Redirect

Recirect 可以跳轉(zhuǎn)到另外一個(gè)路由中。

props

from
你想開(kāi)始redirect的地址，包括一些動(dòng)態(tài)的地址。默認(rèn)為* ,這樣任何匹配不到路由規(guī)則的情況多回被重定向到另外一個(gè)地方。
to
你想要重定向到得路由名字。
params
默認(rèn)情況下，這些參數(shù)將會(huì)自動(dòng)傳遞到新的路由，你也可以指定他們，特別是你不需要的時(shí)候。
query
和params一樣

舉例

能夠被放置到路由的任何層級(jí)。如果你選擇把它放在路由某一層級(jí)的下方，那么from路徑也會(huì)匹配到它上層的路徑。

Route

Route 用于聲明式地映射路由規(guī)則到你多層嵌套的應(yīng)用組件。
props
name(可選)
name 在路由中是唯一的，被使用在 Link 組件和路由轉(zhuǎn)換的方法中。
path(optional)
在url中使用的路徑，如果不填寫(xiě)的話(huà)，路徑就是name，如果name也沒(méi)有的話(huà)，默認(rèn)就是 /.
handler
當(dāng)路由被匹配的時(shí)候會(huì)被 RouteHander 渲染的組件。
children
路由是可以嵌套的，如果子路由的路徑被匹配，那么父路由也處于激活狀態(tài)。

ignoreScrollBehavior
當(dāng)路由或者路由的params 改變的時(shí)候，路由會(huì)根據(jù)scrollBehavior 來(lái)調(diào)整頁(yè)面滾動(dòng)條的位置。但是你也可以不選擇這項(xiàng)功能，特別是在一些搜索頁(yè)面或者是 tab切換的頁(yè)面。

Top-Level Router.create

創(chuàng)建一個(gè)新的路由。

Signature
Router.create(options)

Options
routes

location

scrollBehavior

onAbort
Used server-side to know when a route was redirected.

Method
run(callback)
啟動(dòng)路由，和Router.run 一樣

舉例

// the more common API is
Router.run(routes, Router.HistoryLocation, callback);

// which is just a shortcut for
var router = Router.create({
  routes: routes,
  location: Router.HistoryLocation
});

router.run(callback);

Router.run

The main API into react router. It runs your routes, matching them against a location, and then calls back with the next state for you to render.

signature

Router.run(routes,[location,],callback)
參數(shù)
routes
location (可選)
默認(rèn)值是Router.HashLocation 如果你設(shè)置了Location 那么它的改變會(huì)被監(jiān)聽(tīng)。如果你設(shè)置了一個(gè)字符路勁，那么路由會(huì)立即匹配并執(zhí)行回調(diào)函數(shù)。

舉例

// Defaults to `Router.HashLocation`
// callback is called whenever the hash changes
Router.run(routes, callback);

// HTML5 History
// callback is called when history events happen
Router.run(routes, Router.HistoryLocation, callback);

// Server rendering
// callback is called once, immediately.
Router.run(routes, "/some/path", callback);

callback(Root,state)
回調(diào)函數(shù)接收兩個(gè)參數(shù)
1、 Root
2、 state

Root
是一個(gè)包含了所有匹配組件的一個(gè)組件，它用來(lái)渲染你的組件。
state
一個(gè)包含了匹配狀態(tài)的對(duì)象。
state.path
帶有查詢(xún)參數(shù)的當(dāng)前URL
state.action
一個(gè)觸發(fā)路由改變的操作
state.pathname
不帶查詢(xún)參數(shù)的URL
state.params
當(dāng)前被激活路由匹配路徑對(duì)應(yīng)的參數(shù) 如 /:id 對(duì)應(yīng)的id值.

state.query
當(dāng)前被激活路由匹配路徑對(duì)應(yīng)的查詢(xún)參數(shù)
state.routes
包含了匹配路由的數(shù)組，在組件渲染之前獲取數(shù)據(jù)會(huì)顯得很有幫助。
可以查看 example async-data

舉例

基本用法

javascript
Router.run(routes, function (Root) {
// whenever the url changes, this callback is called again
React.render(, document.body);
});

var resolveHash = require("when/keys").all;

var SampleHandler = React.createClass({
statics: {

// this is going to be called in the `run` callback
fetchData: function (params) {
  return fetchStuff(params);
}

},
// ...
});

Router.run(routes, Router.HistoryLocation, function (Root, state) {

// create the promises hash
var promises = state.routes.filter(function (route) {

// gather up the handlers that have a static `fetchData` method
return route.handler.fetchData;

}).reduce(function (promises, route) {

// reduce to a hash of `key:promise`
promises[route.name] = route.handler.fetchData(state.params);
return promises;

}, {});

resolveHash(promises).then(function (data) {

// wait until we have data to render, the old screen stays up until
// we render
React.render(, document.body);

});
});

something.serve(function (req, res) {
Router.run(routes, req.path, function (Root, state) {

// could fetch data like in the previous example
fetchData(state.matches).then(function (data) {
  var html = React.renderToString();
  res.send(html);
});

});
});

#Components

##Link
用于在應(yīng)用程序中導(dǎo)航的一種主要方式。``Link``將會(huì)渲染出標(biāo)簽屬性href 變得容易被理解。
當(dāng)``Link``定位的路由被激活的時(shí)候自動(dòng) 顯示為 定義的 ``activeClassName`` 和/或者
``activeStyle`` 定義的樣式。

**Props**
``to``
要被定位到的路由名字，或者是完整的路徑

``params``

包含了名字/值的對(duì)象，和路由地址的動(dòng)態(tài)段對(duì)應(yīng)一致。

``query``

一個(gè)包含名字/值 的對(duì)象，它會(huì)成為地址中的查詢(xún)參數(shù)

**舉例**

// given a route config like this

// create a link with this

// though, if your user properties match up to the dynamic segements:

``query``

一個(gè)包裝成javascript對(duì)象的字符串查詢(xún)參數(shù)

``activeClassName``

當(dāng)路由被激活是 ``Link`` 接收的 className,默認(rèn)值為 ``active``

``activeStyle ``

當(dāng)路由被激活是鏈接元素 展示的style樣式。

``onClick``

對(duì)點(diǎn)擊時(shí)間的常規(guī)處理，僅僅在標(biāo)簽```` 上起效。調(diào)用 ``e.preventDefault`` 或者是返回false 將會(huì)阻止阻止事件發(fā)射。通過(guò) ``e.stopPropagation()`` 將會(huì)阻止時(shí)間冒泡。

**others**

你也可以在上傳遞 props，例如 title,id , className 等。

**舉例**

提供一個(gè)形式像 ``:`` 這樣的路由

{user.name}

Michael
Michael

{user.name}

##Root
React router 創(chuàng)建的應(yīng)用頂層組件。

**舉例**

Router.run(routes, (Root) => {
React.render(, document.body);
});

**說(shuō)明**
當(dāng)前路由的實(shí)例和 ``Root`` 一致。

var MyRouter = Router.create({ routes });

MyRouter.run((Root) => {
Root === MyRouter; // true
});

當(dāng)前這僅僅是一個(gè)實(shí)現(xiàn)的細(xì)節(jié)，我們會(huì)逐步將它設(shè)計(jì)成一個(gè)公共的API。


##Route Handler
用戶(hù)定義的一個(gè)組件，作為傳遞給``Routes`` 的一個(gè) ``handler`` 屬性。 路由會(huì)在你通過(guò) ``RouterHandler`` 渲染組件的時(shí)候給你注入一些屬性值。同時(shí)在路由轉(zhuǎn)換的時(shí)候調(diào)用一些生命周期的靜態(tài)方法。

**注入的屬性**

``params``

url 中的動(dòng)態(tài)段。

``query``

url中的查詢(xún)參數(shù)

``path``

完整的url 路勁

**舉例**

// given a route like this:

// and a url like this:
"/course/123/students?sort=name"

var Students = React.createClass({
render () {

this.props.params.courseId; // "123"
this.props.query.sort; // "name"
this.props.path; // "/course/123/students?sort=name"
// ...

}
});

**靜態(tài)的生命周期方法**

你可以定義一些在路由轉(zhuǎn)換時(shí)會(huì)調(diào)用的靜態(tài)方法到你的路由handler 對(duì)應(yīng)的組件中。

``willTransitionTo(transition,params,query,callback)``

當(dāng)一個(gè)handler 將要被渲染的時(shí)候被調(diào)用。為你提供了中斷或者是重定向的機(jī)會(huì)。你可以在異步調(diào)用的時(shí)候暫停轉(zhuǎn)換，在完成之后可以調(diào)用``callback(error)``  方法?；蛘咴趨?shù)列表中省略callback。

``willTranstionFrom(transition,component,callback)``

當(dāng)一個(gè)被激活路由將要跳出的時(shí)候給你提供了中斷跳出的方法。``component`` 是當(dāng)前的組件。你可能需要檢查一下 state 的狀態(tài)來(lái)決定是否需要跳出。

**關(guān)于 ``callback`` 的參數(shù)**

 如果你在參數(shù)列表中添加了callback，你需要在最后的時(shí)候調(diào)用它，即使你使用的是重定向。

**舉例**

var Settings = React.createClass({
statics: {

willTransitionTo: function (transition, params, query, callback) {
  auth.isLoggedIn((isLoggedIn) => {
    transition.abort();
    callback();
  });
},

willTransitionFrom: function (transition, component) {
  if (component.formHasUnsavedData()) {
    if (!confirm("You have unsaved information,"+
                 "are you sure you want to leave this page?")) {
      transition.abort();
    }
  }
}

}

//...
});

GPU云服務(wù)器云服務(wù)器 react router cdn react-router react-router4 react-router-redux

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92332.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

劉德剛

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Postman測(cè)試工具調(diào)試接口詳細(xì)教程【向后端發(fā)送Json數(shù)據(jù)并接收返回的Json結(jié)果】

閱讀 1374·2021-11-15 11:37
半月灣hmbcloud：洛杉磯CN2 GIA方案（DC5）機(jī)房，帶寬升級(jí)至200M起步，三網(wǎng)CN2

閱讀 2323·2021-09-30 09:55
換主機(jī)郵件資料怎么換-電腦換主機(jī)，如何才能保存原來(lái)的資料在新主機(jī)中？

閱讀 4778·2021-09-22 15:51
怎么刪除匿名主機(jī)-qq匿名回答怎么刪除？

閱讀 3847·2021-09-22 15:46
Bootstrap清除浮動(dòng)的實(shí)現(xiàn)原理

閱讀 2838·2019-08-30 15:52
vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)

閱讀 555·2019-08-29 16:20
css流程圖、步驟圖，流程線(xiàn)與環(huán)節(jié)分別實(shí)現(xiàn)，支持單環(huán)節(jié)、多環(huán)節(jié)情況。scss生成CSS

閱讀 2958·2019-08-29 15:12
vue多環(huán)境配置方案

閱讀 1225·2019-08-26 18:27

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

中文 React Router

About

Inbox

Home

App

App

Message

相關(guān)文章

前端綜合性文檔和教程總結(jié)（持續(xù)更新）

React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

react+react-router4+redux最新版構(gòu)建分享

react+react-router+react-redux全家桶小項(xiàng)目開(kāi)發(fā)過(guò)程分享

發(fā)表評(píng)論

0條評(píng)論

劉德剛

男|高級(jí)講師

TA的文章

Postman測(cè)試工具調(diào)試接口詳細(xì)教程【向后端發(fā)送Json數(shù)據(jù)并接收返回的Json結(jié)果】

半月灣hmbcloud：洛杉磯CN2 GIA方案（DC5）機(jī)房，帶寬升級(jí)至200M起步，三網(wǎng)CN2

換主機(jī)郵件資料怎么換-電腦換主機(jī)，如何才能保存原來(lái)的資料在新主機(jī)中？

怎么刪除匿名主機(jī)-qq匿名回答怎么刪除？

Bootstrap清除浮動(dòng)的實(shí)現(xiàn)原理

vue.js 中使用（...）運(yùn)算符報(bào)錯(cuò)

css流程圖、步驟圖，流程線(xiàn)與環(huán)節(jié)分別實(shí)現(xiàn)，支持單環(huán)節(jié)、多環(huán)節(jié)情況。scss生成CSS

vue多環(huán)境配置方案

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

中文 React Router

About

Inbox

Home

App

App

Message

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！