【全棧React】第17天: 客戶端路由

harriszh 發(fā)布于2019-08-20 18:35 / 1279人閱讀

摘要：但是使用標(biāo)記將告訴瀏覽器處理路由就像服務(wù)器端路由一樣。組件需要一個稱為的屬性指向要渲染的客戶端路由。發(fā)生這種情況的原因是響應(yīng)路由器將渲染與路徑匹配的所有內(nèi)容除非另有指定。屬性預(yù)計將是一個函數(shù)將在對象連同和路由配置時調(diào)用。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3815
原文：https://www.fullstackreact.com/30-days-of-react/day-17/

大多數(shù)（如果不是全部）我們的應(yīng)用將在我們的單頁應(yīng)用中有多個視圖。讓我們直接使用React Router為我們的應(yīng)用創(chuàng)建多個視圖。

我們已經(jīng)做了16天了!輕拍你的后背.....。但不是太久, 還有很多。

現(xiàn)在, 我們的應(yīng)用被限制在一個單一的頁面。發(fā)現(xiàn)任何顯示單個視圖的復(fù)雜應(yīng)用都非常少見。例如, 應(yīng)用可能有一個登錄視圖, 用戶可以在其中登錄, 或者搜索結(jié)果頁顯示用戶的搜索結(jié)果列表。這兩種不同的視圖具有兩種不同的頁面結(jié)構(gòu)。

讓我們看看我們?nèi)绾慰梢愿淖兣c我們的應(yīng)用今天。

我們將使用非常流行的 react-router 庫來處理不同的鏈接。為了使用react-router 庫, 我們需要使用 npm 包管理器來安裝它:

npm install --save react-router-dom

安裝了react-router , 我們將從庫中導(dǎo)入一些軟件包, 并更新我們的應(yīng)用體系結(jié)構(gòu)。在我們做這些更新之前, 讓我們退后一步, 從高層看 how 和 why 我們以這種方式構(gòu)建我們的應(yīng)用。

從概念上講, 我們已經(jīng)看到了如何使用組件和嵌套組件來創(chuàng)建樹結(jié)構(gòu)。使用帶有路由的單個頁面應(yīng)用的這個視角（perspective）, 我們可以將頁面的不同部分視為子級。從這個角度來看, 單頁應(yīng)用中的路由是這樣一種想法, 即我們可以使用一個子樹的一部分并將它與另一個子樹進行切換。然后, 我們可以 動態(tài) 在瀏覽器中切換出不同的樹。

換言之_, 我們將定義一個React組件, 它充當(dāng)可路由元素的 _根 組件。然后, 我們可以告訴React改變一個視圖, 它可以只是交換一個整個React組件為另一個, 雖然它是一個完全不同的頁面渲染的服務(wù)器。

我們將采取我們的App 組件, 并定義所有不同的路由, 我們可以在我們的應(yīng)用在這個 App 組件。我們需要從react-router 包中提取一些組件。我們將用于設(shè)置此結(jié)構(gòu)的這些組件如下:

這是我們用來定義根或路由樹的組件。組件是一個組件, 其中React將在每個路由的基礎(chǔ)上取代它的孩子。

我們將使用組件在 url 的特定位置創(chuàng)建可用的路由。組件安裝在與路由配置屬性中設(shè)置的特定路由匹配的頁面 url 中。

一個舊的、兼容的處理客戶端導(dǎo)航的方法是使用表示應(yīng)用端點的 # (hash) 標(biāo)記。我們將使用此方法。我們需要導(dǎo)入這個對象來告訴瀏覽器這就是我們想要處理導(dǎo)航的方式。

從我們創(chuàng)建了幾天前的根目錄的應(yīng)用, 讓我們更新我們的 src/App.js 來導(dǎo)入這些模塊。我們將使用不同的名稱語法通過 ES6 導(dǎo)入 BrowserRouter :

import React from "react";

import {
  BrowserRouter as Router,
  Route
} from "react-router-dom"

export class App extends React.Component {

  render() {
    
      {/* routes will go here */}
    
  }

}

現(xiàn)在, 讓我們在 DOM 中使用在render()函數(shù)中導(dǎo)入的組件定義路由根,。我們將定義使用 history 屬性的路由類型。在本例中, 我們將使用普遍兼容的哈希歷史類型:

export class App extends React.Component {
  // ...
  render() {
    
      {/* routes will go here */}
    
  }
  // ...
}

現(xiàn)在, 讓我們定義我們的第一條路由。要定義一個路由, 我們將使用組件從react-router 導(dǎo)出, 并傳遞給它的幾個屬性:

path - 要激活的路由的路徑

component -定義路由視圖的組件

讓我們在根路徑 / 中定義路由, 并使用只顯示一些靜態(tài)內(nèi)容的無狀態(tài)組件:

const Home = () => (Welcome home)
  // ...
class App extends React.Component {
  render() {
    return (
      
        
      
    )
  }
}

在瀏覽器中加載此頁, 我們可以看到我們在根 url 處得到了一個路由。不是很使人激動。讓我們添加第二條在/about URL 中顯示關(guān)于頁面的路由。

const Home = () => (Welcome home)
  // ...
class App extends React.Component {
  render() {
    return (
      
        
          
          
        
      
    )
  }
}

在我們看來, 我們需要添加一個鏈接 (或一個錨標(biāo)記- ), 使我們的用戶可以自由地在兩個不同的路由之間旅行。但是, 使用標(biāo)記將告訴瀏覽器處理路由, 就像服務(wù)器端路由一樣。相反, 我們需要使用一個不同的組件 (意外), 稱為: 。

組件需要一個稱為to的屬性, 指向要渲染的客戶端路由。讓我們更新 Home和 About組件以使用Link:

const Home = () => (Welcome home
Go to about)
const About = () => (About
Go home)

等一下...... 我們不太希望 二個路由都 出現(xiàn)。發(fā)生這種情況的原因是, 響應(yīng)路由器將渲染與路徑匹配的所有內(nèi)容 (除非另有指定)。對于這種情況, 響應(yīng)路由器為我們提供了 Switch組件。

組件將只渲染它發(fā)現(xiàn)的第一個匹配 route_。讓我們更新組件以使用 Switch組件。由于響應(yīng)路由器將嘗試渲染 _兩個 組件, 因此我們需要指定我們只希望根組件上的 "精確" 匹配。

const Home = () => (Welcome home
Go to about)
  // ...
class App extends React.Component {
  render() {
    return (
      
        
          
          
        
      
    )
  }
}

顯示視圖

雖然這是一個有限的介紹, 我們不能離開討論的處理react路由器, 而不談我們可以得到不同的方式來渲染子組件。

我們已經(jīng)看到了最簡單的方式可能, 使用 component 屬性, 但有一個更強大的方法使用的屬性稱為render。render屬性預(yù)計將是一個函數(shù), 將在match 對象連同location 和路由配置時調(diào)用。

render 屬性允許我們渲染 無論什么 我們想要在一個路由, 其中包括渲染其他路由。很漂亮吧？讓我們來看看這個動作:

const Home = () => (Welcome home
Go to about)
const About = ({ name }) => (About {name})
  // ...
class App extends React.Component {
  render() {
    return (
      
        
           (
              
                Ari
                Nate
                 (
                    
                      
                      Go home
                    
                  )} />
              
            )} />
           (
              
                Home is underneath me
                
              
            )} />
        
      
    )
  }
}

現(xiàn)在我們的應(yīng)用中有多個頁面。我們已經(jīng)研究了如何通過嵌套組件來渲染這些路由, 其中僅有幾個來自react-router 的導(dǎo)出。

react-router 提供了這么多的功能, 我們沒有時間來彌補在我們的快速介紹路由。有關(guān)詳細信息, 可查看下面連接:

https://github.com/reactjs/react-router/tree/master/docs

fullstack react routing

明天, 我們將開始與再現(xiàn)的整合。下面是我們開始集成更復(fù)雜數(shù)據(jù)處理的地方。

GPU云服務(wù)器云服務(wù)器獨立開發(fā)變現(xiàn)周刊（第 17 期）：為了活第7天:CSS入門 17站群 JDK17

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84725.html

發(fā)表評論

登陸后可評論

0條評論

harriszh

男|高級講師

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

TA的文章

BUI Webapp用于項目中的一點小心得

閱讀 1682·2019-08-30 15:54
前端面試題總結(jié)——綜合問題(持續(xù)更新中)

閱讀 3332·2019-08-26 17:15
在瀏覽器調(diào)起本地應(yīng)用的方法

閱讀 3522·2019-08-26 13:49
leetcode 鏈表相關(guān)題目解析

閱讀 2582·2019-08-26 13:38
【刷算法】丑數(shù)

閱讀 2291·2019-08-26 12:08
webstorm預(yù)覽html配置localhost為本機ip地址

閱讀 3035·2019-08-26 10:41
籃球即時比分api接口調(diào)用示例代碼

閱讀 1369·2019-08-26 10:24
Webpack包教不包會

閱讀 3376·2019-08-23 18:35

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

【全棧React】第17天: 客戶端路由

Welcome home

Welcome home

Welcome home

About

Welcome home

Welcome home

About {name}

相關(guān)文章

**【全棧React】React 30天教程索引**

**【全棧React】第19天: 用Redux進行數(shù)據(jù)管理**

**前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）**

**前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）**

發(fā)表評論

0條評論

harriszh

男|高級講師

TA的文章

BUI Webapp用于項目中的一點小心得

前端面試題總結(jié)——綜合問題(持續(xù)更新中)

在瀏覽器調(diào)起本地應(yīng)用的方法

leetcode 鏈表相關(guān)題目解析

【刷算法】丑數(shù)

webstorm預(yù)覽html配置localhost為本機ip地址

籃球即時比分api接口調(diào)用示例代碼

Webpack包教不包會

最新活動