React Router基本用法

huhud 發布于2019-08-22 10:59 / 1381人閱讀

摘要：本文同步自我的博客，歡迎移步前往，概覽本文基于版本。這樣的做法雖然看起來很簡單，但是也增加了復雜性。總結基本用法大概就這么多一個應用往往是各種組件各種嵌套，搞明白了，就可以很輕松的玩轉路由。

本文同步自我的博客 Reeoo"s Blog，歡迎移步前往，^_^

概覽

本文基于React Router v1.03版本。

React Router是一個為React設計的強大的路由庫。可以幫助我們快速的實現路由功能，包括URL和React components之間的同步映射關系。
在解釋React Router如何使用之前，我們先來看看在不使用React Router的情況下，是怎么樣的，接下來的所有例子中都將使用ES2015語法和語言特性。

不使用React Router

import React from "react"
import { render } from "react-dom"

const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})

const App = React.createClass({
getInitialState() {
  return {
    route: window.location.hash.substr(1)
  }
},

componentDidMount() {
  window.addEventListener("hashchange", () => {
    this.setState({
      route: window.location.hash.substr(1)
    })
  })
},

render() {
  let Child
  switch (this.state.route) {
    case "/about": Child = About; break;
    case "/inbox": Child = Inbox; break;
    default:      Child = Home;
  }

  return (
    
      App
      
        About
        Inbox
      
      
    
  )
}
})

render(, document.body)

當hash值變化的時候，App 將會根據this.state.route 的值決定渲染哪個組件（About、Index、Home）到頁面上。這樣的做法雖然看起來很簡單，但是也增加了復雜性。

想象一下，如果組件 Inbox 有一些嵌套的子組件，它們的路由規則可能是這樣的：/inbox/message/12345 或者 /inbox/unread 這樣的，
上面的路由匹配規則很顯然就不能滿足我們的需求了，我們不得不修改之前的URL解析規則，寫一堆復雜的代碼來判斷哪種URL應該呈現哪個組件（比如：App -> About, App -> Inbox -> Messages -> Message, App -> Inbox -> Messages -> Stats）。

使用React Router

首先，引入React Router

import React from "react"
import { render } from "react-dom"
import { Router, Route, Link } from "react-router"

把判斷路由邏輯的那段代碼刪除，然后加入Link標簽

const App = React.createClass({
  render() {
    return (
      
        App
        {/* 把`a`標簽換成`Link`標簽 */}
        
          About
          Inbox
        

        {/*
          把``替換成`this.props.children`
          路由會渲染正確的組件
        */}
        {this.props.children}
      
    )
  }
})

最后引入和，由它們幫我們搞定路由。

render((
  
    
      
      
    
  
), document.body)

React Router知道哪種URL規則下，渲染哪個組件到頁面上，不需要我們自己在做任何的判斷。
例如：/about這種URL規則，會被構建成
在React Router內部，會把標簽層級轉換成路由配置。如果你不喜歡jsx的這種寫法，也可以使用對象的形式：

const routes = {
  path: "/",
  component: App,
  childRoutes: [
    { path: "about", component: About },
    { path: "inbox", component: Inbox },
  ]
}

render(, document.body)

添加更多的視圖

OK，現在在inbox路由下嵌套一個messages子路由，
首先需要添加一個新的Message組件：

const Message = React.createClass({
  render() {
    return Message
  }
})

然后在原有的inbox路由下面為 Message 組件添加新的路由，這樣就可以得到嵌套的組件。

const Inbox = React.createClass({
  render() {
    return (
      
        Inbox
        {/* 渲染子組件 */}
        {this.props.children}
      
    )
  }
})

render((
  
    
      
      
        {/* 在這里加入要嵌套的視圖 */}
        {/* render the stats page when at `/inbox` */}
        
        {/* 渲染message組件  /inbox/messages/123 */}
        
      
    
  
), document.body)

訪問inbox/messages/12345會匹配新加的路由，App->Inbox->Message,路由層級：

訪問/inbox，路由層級：

獲取參數

當我們訪問inbox/messages/12345的時候，我們需要獲取到相應的參數，然后從服務器獲取對應的數據。當視圖渲染的時候，路由組件會注入一些有用的屬性到組件上，特別是一些從URL動態獲取的參數信息，在我們這個示例里是：id

const Message = React.createClass({

  componentDidMount() {
    // from the path `/inbox/messages/:id`
    const id = this.props.params.id

    fetchMessage(id, function (err, message) {
      this.setState({ message: message })
    })
  },

  // ...

})

你也可以通過查詢串來獲取參數，假如我們在瀏覽器里面訪問/foo?bar=baz這個路由,在你的組件中可以通過this.props.location.query.bar獲取bar的值baz。

總結

React Router基本用法大概就這么多,一個應用往往是各種組件各種嵌套，搞明白了React Router，就可以很輕松的玩轉路由。

GPU云服務器云服務器 react router cdn react-router react-router4 react-router-redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91586.html

react-router @4用法整理

摘要：官方文檔源碼這篇文章主要介紹了的基本用法包括動態路由編程式導航等安裝用法動態路由的基本用法編程式導航總結安裝用法示例代碼關于路由重定向使用的格式注意位置需要在定義路由的后面比如重定向就需要寫在后面關于路由匹配默認寫在路由末尾前 router@4 react-router@4官方文檔 github源碼這篇文章主要介紹了react-router@4的基本用法,包括動態路由,編程式...

piglei 2019-08-21 17:52 評論0 收藏0
react-router-dom v^4學習歷程（一）

摘要：用于精準匹配路徑，不用也會匹配到匹配的路徑的子路徑，這樣兩個路由組件都會顯示。路徑中傳遞參數到路由到的組件，就是在路徑前面加上這樣這個路由地址就會變成一個參數被組件接受到。例如可以獲取到當前的基礎路徑。 react-router-dom的版本已經更新到了4.1.1，那么我們就一起來學習學習react v4這個新版路由的基本使用吧！在學習路由之前我們先需要復習幾個基礎知識，關于reac...

KevinYan 2019-08-20 16:25 評論0 收藏0
React Router 使用教程(阮一峰)

摘要：它是官方維護的，事實上也是唯一可選的路由庫。表示的這個部分是可選的。另一種做法是，使用指定當前路由的。而組件會使用路徑的精確匹配。否則用戶直接向服務器請求某個子路由，會顯示網頁找不到的錯誤。真正學會 React 是一個漫長的過程。你會發現，它不是一個庫，也不是一個框架，而是一個龐大的體系。想要發揮它的威力，整個技術棧都要配合它改造。你要學習一整套解決方案，從后端到前端，都是全新的做...

Yang_River 2019-08-20 17:03 評論0 收藏0
React-Redux的用法

摘要：基本流程組件只接受數據包括出來的數據以及方法容器組件通過將返回的作為傳入通過將作為傳入通過方法將這兩個方法與組件連接起來返回一個容器組件組件將所有組件分成兩大類組件和容器組件組件有以下幾個特征只負責的呈現不帶有任何業務邏輯沒有狀態即不基本流程 1.UI組件Example,只接受this.props數據,包括reducer出來的數據state,以及dispatch方法.2.容器組件co...

leap_frog 2019-08-20 18:19 評論0 收藏0
React Native 常用的 15 個庫

摘要：聲明式用法只需使用動畫的名稱，該動畫將在加載該元素時立即生效。實際案例這個庫支持本地推送通知功能比較全面。實際案例具有縮放支持，回調，縮放以適應和滾動指示器支持的組件。這是圖像上傳或圖像處理的基本庫。本篇 React native 庫列表不是從網上隨便找的，這些是我在我的應用中親自使用的庫。這些庫功能可能跟其它庫也有，但經過大量研究并在我的程序中嘗試后，我選擇了這些庫。想閱讀更...

Juven 2019-08-23 16:56 評論0 收藏0