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

資訊專欄INFORMATION COLUMN

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

harriszh / 1285人閱讀

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

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

大多數（如果不是全部）我們的應用將在我們的單頁應用中有多個視圖。讓我們直接使用React Router為我們的應用創建多個視圖。

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

現在, 我們的應用被限制在一個單一的頁面。發現任何顯示單個視圖的復雜應用都非常少見。例如, 應用可能有一個登錄視圖, 用戶可以在其中登錄, 或者搜索結果頁顯示用戶的搜索結果列表。這兩種不同的視圖具有兩種不同的頁面結構。

讓我們看看我們如何可以改變與我們的應用今天。

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

npm install --save react-router-dom

安裝了react-router , 我們將從庫中導入一些軟件包, 并更新我們的應用體系結構。在我們做這些更新之前, 讓我們退后一步, 從高層看 how 和 why 我們以這種方式構建我們的應用。

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

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

我們將采取我們的App 組件, 并定義所有不同的路由, 我們可以在我們的應用在這個 App 組件。我們需要從react-router 包中提取一些組件。我們將用于設置此結構的這些組件如下:

/

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

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

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

從我們創建了幾天前的根目錄的應用, 讓我們更新我們的 src/App.js 來導入這些模塊。我們將使用不同的名稱語法通過 ES6 導入 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 */}
    
  }

}

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

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

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

path - 要激活的路由的路徑

component -定義路由視圖的組件

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

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

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

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

          
          
        

      
    )
  }
}

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

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

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

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

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

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

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

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

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
                
              

            )} />
        
      
    )
  }
}

現在我們的應用中有多個頁面。我們已經研究了如何通過嵌套組件來渲染這些路由, 其中僅有幾個來自react-router 的導出。

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

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

fullstack react routing

明天, 我們將開始與再現的整合。下面是我們開始集成更復雜數據處理的地方。

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

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

相關文章

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

    摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

    appetizerio 評論0 收藏0

  • 【全棧React】第19天: 用Redux進行數據管理

    摘要：歸約器函數負責返回應用當前全局狀態的表示形式。當我們在存儲上發送操作時將使用應用的當前狀態和導致狀態更新的操作來調用此歸約器函數。回到我們的歸約器我們可以檢查的動作類型并采取適當的步驟創建下一個狀態。我們將處理動作創造者中歸約器的副作用。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3811原文：https://www.ful...

    glumes 評論0 收藏0

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

    摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

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

    摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    Carson 評論0 收藏0

發表評論

0條評論

harriszh

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<