React Router 事實上是React官方的標準路由庫。當你在一個多檢視的React應用中來回切換，你需要一個路由來管理那些URL。React Router 專注於此，同步保持你應用的UI和URL。

這個教程主要給你介紹React Router 的v4版本，以及你使用它可以做的大部分事情。

開場白

React 是一個很流行的庫，用於在客戶端渲染建立的單頁應用(SPAs)。 一個SPA會有很多檢視（也可以稱為頁面）,不像傳統的多頁應用，檢視之間的跳轉不應該導致整個頁面被重新載入。相反，我們希望檢視就在當前頁面裡渲染。那些習慣於多頁應用的終端使用者，期望在一個SPA中應該包含以下特性：

• 應用中每個檢視都應該有對應的唯一URL用來區分檢視。以便使用者可以在之後通過書籤收藏的URL指向引用資源 – 例如：www.example.com/products
  。
• 瀏覽器的前進後退按鈕應該正常工作。
• 動態生成的巢狀檢視更應該有成對應的URL – 例如：example.com/products/shoes/101，101是產品id。

路由跳轉是指在同步保持瀏覽器URL的過程中渲染頁面中的檢視。React Router 讓你宣告式的操作路由跳轉。宣告式路由方法，通過說“路由應該是這樣的”，允許你控制應用中的資料流：

JavaScript `<Route path="/about" component={About}/>`

1	` <Route path="/about"component={About}/>`

你可以把<Router>元件放在任意你想要路由渲染的地方。由於我們所需要接觸的<Router>,<Link>以及其他React Router的API都只是元件，所以你可以非常方便的在React裡使用路由。

寫在開頭。有一個常見的誤區，大家都認為React Router是由facebook官方開發的一個路由解決方案。實際上，它是一個因其設計和簡易性而流行的第三方庫。如果你的需求只侷限於路由的跳轉，你可以無需太多麻煩，就可以從頭開始實現一個自定義的路由。但是，瞭解React Router的基礎知識可以讓你更清楚的認識一個路由是怎麼工作的。

概述

本次教程分為幾個部分。首先，我們使用npm安裝好React和React Router，然後我們就開始React Router的基礎部分。你將會看到React Router不同的程式碼示例的效果。本次教程涉及的例子包含：

1. 基本路由跳轉
2. 巢狀路由
3. 帶路徑引數的巢狀路由
4. 保護式路由

主要圍繞構建這些路由所涉及的概念進行討論。這個專案的全部程式碼在這個Github倉庫可以看到。當你進入一個單獨的demo目錄，執行npm install來安裝依賴。要在本地伺服器上執行這個應用，執行npm start，然後在瀏覽器開啟http://localhost:3000/可以看到執行的demo。

讓我們開始吧！

安裝 React Router

假設你已經有一個React開發環境並已經運行了。如果沒有，可以跳轉到React和JSX入門。或者，你可以使用Create React App來生成建立一個基本的React專案所需要的檔案。這是Create React App生成的預設目錄結構：

react-routing-demo-v4 ├── .gitignore ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── README.md ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock

1234567891011121314151617

react-routing-demo-v4├──.gitignore├──package.json├──public│├──favicon.ico│├──index.html│└──manifest.json├──README.md├──src│├──App.css│├──App.js│├──App.test.js│├──index.css│├──index.js│├──logo.svg│└──registerServiceWorker.js└──yarn.lock

React Router庫包含三個包： react-router, react-router-dom, 和 react-router-native。react-router是路由的核心包，而其他兩個是基於特定環境的。如果你在開發一個網站，你應該使用react-router-dom，如果你在移動應用的開發環境使用React Native，你應該使用react-router-native。

使用npm安裝react-router-dom：

`npm install --save react-router-dom`

1	`npm install--save react-router-dom`

React Router 基礎

下面是路由的例子：

<router> <route exact="" path="/" component="{Home}/"> <route path="/category" component="{Category}/"> <route path="/login" component="{Login}/"> <route path="/products" component="{Products}/"/> </route> </route> </route> </router>

123456789

<router><route exact=""path="/"component="{Home}/"><route path="/category"component="{Category}/"><route path="/login"component="{Login}/"><route path="/products"component="{Products}/"/></route></route></route></router>

Router

像上面的例子，你需要一個元件和一些元件來建立一個基本的路由。由於我們建立的是一個基於瀏覽器的應用，我們可以從React Router API中使用這兩種型別的路由：

1. <BrowserRouter>
2. <HashRouter>

它們之間主要的區別，可以在它們所建立的URL明顯看出：

// http://example.com/about // http://example.com/#/about

12345

// http://example.com/about// http://example.com/#/about

<BrowserRouter>在兩者中更為常用，原因是它使用了HTML5的history API來記錄你的路由歷史。而<HashRouter>則使用URL(window.location.hash)的hash部分來記錄。如果你想相容老式瀏覽器，你應該使用<HashRouter>。

使用<BrowserRouter>元件包裹App元件。

index.js

JavaScript /* Import statements */ import React from 'react'; import ReactDOM from 'react-dom'; /* App is the entry point to the React code.*/ import App from './App'; /* import BrowserRouter from 'react-router-dom' */ import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('root'));

123456789101112131415

/* Import statements */import React from'react';import ReactDOM from'react-dom';/* App is the entry point to the React code.*/import App from'./App';/* import BrowserRouter from 'react-router-dom' */import{BrowserRouter}from'react-router-dom';ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'));

注意：Router元件只能有一個子元素。子元素可以是HTML – 例如div – 也可以是一個react元件。

要讓React Router工作，你需要從react-router-dom庫引入相關的API。這裡，我在index.js引入了BrowserRouter，也從App.js引入了App元件。App.js，如你所猜想的，是React元件的入口。

上述程式碼給我們整個App元件建立了一個history例項。接下來正式介紹下history。

history

history是一個讓你輕鬆管理所有Javascript執行的會話記錄的Javascript庫。history提供了簡潔的API，讓你可以管理history堆疊，跳轉，確認跳轉，以及保持會話之間的狀態。 – 來自React 培訓文件

每個router元件建立了一個history物件，用來記錄當前路徑(history.location)，上一步路徑也儲存在堆疊中。當前路徑改變時，檢視會重新渲染，給你一種跳轉的感覺。當前路徑又是如何改變的呢？history物件有history.push()和history.replace()這些方法來實現。當你點選元件會觸發history.push()，使用則會呼叫history.replace()。其他方法 – 例如history.goBack()和history.goForward() – 用來根據頁面的後退和前進來跳轉history堆疊。

接下來，我們談談Links和Routes

Links and Routes

是React Router裡最重要的元件。若當前路徑匹配route的路徑，它會渲染對應的UI。理想來說，應該有一個叫path的prop，當路徑名跟當前路徑匹配才會渲染。

另一方面，用來跳轉頁面。可以類比HTML的錨元素。然而，使用錨鏈接會導致瀏覽器的重新整理，這不是我們想要的。所以，我們可以使用來跳轉至具體的URL，並且檢視重新渲染不會導致瀏覽器重新整理。

我們已經介紹了建立一個基本的路由需要的所有東西。讓我們試一個吧。

Demo 1: 基礎路由

src/App.js

JavaScript /* Import statements */ import React, { Component } from 'react'; import { Link, Route, Switch } from 'react-router-dom'; /* Home component */ const Home = () => ( <div> <h2>Home</h2> </div> ) /* Category component */ const Category = () => ( <div> <h2>Category</h2> </div> ) /* Products component */ const Products = () => ( <div> <h2>Products</h2> </div> ) /* App component */ class App extends React.Component { render() { return ( <div> <nav className="navbar navbar-light"> <ul className="nav navbar-nav"> /* Link components are used for linking to other views */ <li><Link to="/">Homes</Link></li> <li><Link to="/category">Category</Link></li> <li><Link to="/products">Products</Link></li> </ul> </nav> /* Route components are rendered if the path prop matches the current URL */ <Route path="/" component={Home}/> <Route path="/category" component={Category}/> <Route path="/products" component={Products}/> </div> ) } }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

/* Import statements */import React,{Component}from'react';import{Link,Route,Switch}from'react-router-dom';/* Home component */constHome=()=>(<div><h2>Home</h2></div>)/* Category component */constCategory=()=>(<div><h2>Category</h2></div>)/* Products component */constProducts=()=>(<div><h2>Products</h2></div>)/* App component */classApp extendsReact.Component{render(){return(<div><nav className="navbar navbar-light"><ul className="nav navbar-nav">/* Link components are used for linking to other views */<li><Linkto="/">Homes</Link></li><li><Linkto="/category">Category</Link></li><li><Linkto="/products">Products</Link></li></ul></nav>/* Route components are rendered if the path prop matches the current URL */<Route path="/"component={Home}/><Route path="/category"component={Category}/><Route path="/products"component={Products}/></div>)}}

我們在App.js裡定義了 Home，Category，和Products元件。儘管目前看起來沒問題，當元件變得越來越臃腫，最好將每個元件分成單獨的檔案。根據經驗，如果元件程式碼超過了10行，我通常會給它建立一個新的檔案。從第二個demo開始，我會將App.js裡面越來越多的元件分成單獨的檔案。

在App元件中，我們寫了路由跳轉的邏輯。 的路徑與當前路徑匹配，對應元件就會被渲染。對應渲染的元件傳給了第二個prop–component。

在這裡，/同時匹配/和/category。因此，所有路由都匹配並被渲染。我們該如何避免呢？應該給 path='/'的路由傳遞exact= {true}props：

JavaScript `<Route exact={true} path="/" component={Home}/>`

1	`<Route exact={true}path="/"component={Home}/>`

若只想要路由在路徑完全相同時渲染，你就可以使用exactprops。

巢狀路由

建立巢狀路由之前，我們需要更深入的理解如何執行。開始吧。

<Route>有三個可以用來定義要渲染內容的props：

• component.在上面我們已經看到了。當URL匹配時，router會將傳遞的元件使用React.createElement來生成一個React元素。
• render. 適合行內渲染。在當前路徑匹配路由路徑時，renderprop期望一個函式返回一個元素。
• children.childrenprop跟render很類似，也期望一個函式返回一個React元素。然而，不管路徑是否匹配，children都會渲染。

Path and match

path用來標識路由匹配的URL部分。React Router使用了Path-to-RegExp庫將路徑字串轉為正則表示式。然後正則表示式會匹配當前路徑。

當路由路徑和當前路徑成功匹配，會生成一個物件，我們叫它match。match物件有更多關於URL和path的資訊。這些資訊可以通過它的屬性獲取，如下所示：

• match.url.返回URL匹配部分的字串。對於建立巢狀的很有用。
• match.path.返回路由路徑字串 – 就是。將用來建立巢狀的。
• match.isExact.返回布林值，如果準確（沒有任何多餘字元）匹配則返回true。
• match.params.返回一個物件包含Path-to-RegExp包從URL解析的鍵值對。

現在我們完全瞭解了，開始建立一個巢狀路由吧。

Switch元件

在我們開始示例程式碼籤，我想給你介紹下元件。當一起使用多個時，所有匹配的routes都會被渲染。根據demo1的程式碼，我新增一個新的route來驗證為什麼很有用。

JavaScript <Route exact path="/" component={Home}/> <Route path="/products" component={Products}/> <Route path="/category" component={Category}/> <Route path="/:id" render = {()=> (<p> I want this text to show up for all routes other than '/', '/products' and '/category' </p>)}/>

1234	<Route exact path="/"component={Home}/><Route path="/products"component={Products}/><Route path="/category"component={Category}/><Route path="/:id"render={()=>(<p>Iwant thistext toshow up forall routes other than'/','/products'and'/category'</p>)}/>

當URL為/products，所有匹配/products路徑的route都會被渲染。所以，那個path為：id的<Route>會跟著Products元件一塊渲染。設計就是如此。但是，若這不是你想要的結果，你應該給你的routes新增<Switch>元件。有<Switch>元件的話，只有第一個匹配路徑的子<Route>會渲染。

Demo 2: 巢狀路由

之前，我們給/, /category and /products建立了路由。但如果我們想要/category/shoes這種形式的URL呢？

src/App.js

JavaScript import React, { Component } from 'react'; import { Link, Route, Switch } from 'react-router-dom'; import Category from './Category'; class App extends Component { render() { return ( <div> <nav className="navbar navbar-light"> <ul className="nav navbar-nav"> <li><Link to="/">Homes</Link></li> <li><Link to="/category">Category</Link></li> <li><Link to="/products">Products</Link></li> </ul> </nav> <Switch> <Route exact path="/" component={Home}/> <Route path="/category" component={Category}/> <Route path="/products" component={Products}/> </Switch> </div> ); } } export default App; /* Code for Home and Products component omitted for brevity */

123456789101112131415161718192021222324252627282930

import React,{Component}from'react';import{Link,Route,Switch}from 相關推薦 React Router v4 版本 完全指北 React Router 事實上是React官方的標準路由庫。當你在一個多檢視的React應用中來回切換，你需要一個路由來管理那些URL。React Router 專注於此，同步保持你應用的UI和URL。 這個教程主要給你介紹React Router 的v4版本，以及你使用它可以做的大部分事情。 開場白 R react-router v4 學習實踐 key 網上 .com 主域 left 登錄 返回 定向 .cn 最近學習了 react-router v4，根據官方 API 文檔和網上資源做了一個簡單的路由示例。 先用官方的工具 create-react-app 初始化一個 react 項目模板，再根 react-router v4 路由規則解析 前言 react-router升級到4之後，跟前面版本比有了很大的差別。 例如包的拆分，動態路由等詳細的差別就不說了，各位大神的總結也很到位，詳細可以點選看看，All About React Router 4這篇文章。 此外還有個差別是路由規則的變化。 一直有著上個版本的習慣，所以稍微複雜的路由，配起來的時 JavaScript 事件迴圈及非同步原理（完全指北） 引言 最近面試被問到，JS 既然是單執行緒的，為什麼可以執行非同步操作？ 當時腦子蒙了，思維一直被困在 單執行緒 這個問題上，一直在思考單執行緒為什麼可以額外執行任務，其實在我很早以前寫的部落格裡面有寫相關的內容，只不過時間太長給忘了，所以要經常溫習啊：（淺談 Generator 和 Promise react-router v4 之 啥是 原文翻譯： <Switch>   渲染第一個被location匹配到的並且作為子元素的<Route>或者<Redirect>   使用<Switch>包裹和直接用一打<Route>s有什麼區別呢？ react-router v4 API 翻譯(二) HashRouter 它是一種Router，其使用了URL的hash值來使得頁面和瀏覽器的history保持一致。另外Hash history 不支援 location.key 和 location.state。另外由於該技術只是用來支援舊版瀏覽器，因此更推薦大家使用 BrowserRo react-router v4 API 翻譯(一) BrowserRouter 它是一種使用了HTML5的history API來記錄你的路由歷史。使得頁面和瀏覽器的history保持一致 import { BrowserRouter } from 'react-router-dom' <BrowserRouter ba react-router v4 GUID 翻譯(一) 基礎元件（Basic Components） React Router中有三種類型的元件：路由元件(router components)，路由匹配元件(route matching components)和導航元件(navigation components.)。在Web應用程式中使用的 React Router V4 精講 一、前端路由和後端路由 1)後端路由 多頁應用中，一個URL對應一個HTML頁面，一個Web應用包含很多HTML頁面，在多頁應用中，頁面路由控制由伺服器端負責，這種路由方式稱為後端路由。 多頁應用中,每次頁面切換都需要向伺服器傳送一次請求，頁面使用到的靜態資源也需要 git爬坑不完全指北：Permission to xxx.git denied to user的解決方案 　　由於對之前github賬戶名不太滿意，又不像大神一樣需要兩個賬號繫結。所以今天註冊了新賬號，想把電腦繫結到新賬號上，結果就踩坑了……報錯如標題。 　　在網上按照這個題目可以搜尋出一大堆的解決方案，但都是一個思路，那就是兩個賬號繫結兩個金鑰。先不說操作過程稍微複雜點吧，關鍵在於這不是我想要的結果，我就要一個 webpack v3 結合 react-router v4 做 dynamic import — 按需載入（懶載入） 為什麼要做dynamic import？ dynamic import不知道為什麼有很多叫法，什麼按需載入，懶載入，Code Splitting，程式碼分頁等。總之，就是在SPA，把JS程式碼分成N個頁面份數的檔案，不在使用者剛進來就全部引入，而是等使用者跳轉路由的時候，再載入對應的JS檔案。這樣做的好處就 A Simple React Router v4 Tutorial InstallationReact Router has been broken into three packages: react-router, react-router-dom, and react-router-native.You should almost never have to insta react-router v4 掃雷記 csdn的編輯器終於能截圖了啊，比起之前試圖推薦的markdown編輯器，貼圖還是更好用，畢竟這裡是部落格不是文件^_^      cause：return 後面的括號必須在同一行，如果(在下一行就會認為沒有返回東西 2、warning: You should not node 使用 sequelize 操作資料庫不完全指北 開始步驟 npm init -y 安裝依賴 npm i sequelize mysql2 standard --save 連線資料庫 建立連線 新建一個 db.js 實現react-router v4（上） 寫在前面 用react-router v4可以實現單頁面應用，可以將元件對映到路由上，將對應的元件渲染到想要渲染的位置。 react路由有兩種方式：一種是HashRouter，即利用hash實現路由切換。另一種是BrowserRouter，即利用html5 API實現路由的切換。本文是在閱讀react-ro 聊聊 React Router v4 的設計思想 React Router v4 釋出已經有幾個月了，但好像並沒有得到太多人的青睞，大家（包括我們團隊自己）還是習慣使用v2、v3版本。這一方面是因為v4版本是一次破壞性的升級，從v2、v3 升級到v4，必需要大量重寫原有的路由相關的程式碼，對於已經穩定的專案，一 vue踩坑不完全指北(1) 1.Vuejs元件 vuejs構建元件使用 Vue.component('componentName',{ /*component*/ })； 這裡注意一點，元件要先註冊再使用，也就是說： Vue.component('mine',{ templa react-router v4 路由跳轉 動態引數 react-router v4 路由跳轉 react-router v4 路由傳參 使用 withRouter withRouter高階元件，提供了history讓你使用~ import React JavaScript 作用域不完全指北 什麼是作用域 對於幾乎所有程式語言，最基本的功能之一就是能夠儲存變數的值，並且能在之後對這個值進行訪問和修改。這樣就會帶來幾個問題，這些變數儲存在哪裡？程式在需要的時候又是如何找到它們的？要解決這些問題，就需要引入一套規則來儲存變數和訪問變數，這套規則就是作用域。 理解作用域 在剛開始接觸 JavaScri JavaScript 詞法作用域不完全指北 在 JavaScript 作用域不完全指北 中，我們介紹了作用域的概念以及 JavaScript 引擎、編譯器和作用域的關係。作用域有兩種主要的工作模型：詞法作用域和動態作用域。其中最為普遍的也是大多數程式語言所採用的是詞法作用域，我們主要對其進行研究學習。在傳統編譯語言的流程中， 程式中的一段原始碼在執行之