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

資訊專欄INFORMATION COLUMN

React Router4.0

kuangcaibao / 1908人閱讀

摘要：的值是一個函數(shù)，這個函數(shù)返回一個元素，這個函數(shù)返回一個元素。這種方式可以很方便的為待渲染的組件傳遞額外的屬性。與之前兩種方式不同的是，無論是否匹配成功，返回的組件都將會被渲染。使用保證只有當(dāng)?shù)臑闀r，第一個才會被匹配。

React Router v4是對React Router的一次徹底重構(gòu)，采用動態(tài)路由，遵循React中一切皆組件的思想，每一個Route(路由)都是一個普通的React組件。

BrowserRouter創(chuàng)建的URL形式如下：
http://react.com/some/path
HashRouter創(chuàng)建的URL形式如下：
http://react.com/#/some/path

使用BrowserRouter時，一般還需要對服務(wù)器進(jìn)行配置，讓服務(wù)器能正確處理所有可能的URL.例如，當(dāng)瀏覽器發(fā)送 http://react.com/some/path 和 http://react.com/some/path2兩...，服務(wù)器能夠返回正確的HTML頁面（也就是單頁面應(yīng)用中唯一的html頁面).使用HashRouter則不存在這個問題，因為hash部分的內(nèi)容會被服務(wù)器自動忽略，真正有效的是hash前面的部分，而對于單頁面應(yīng)用來說，這部分內(nèi)容是固定的。

路由的配置

1.path

(1)當(dāng)使用BrowserRouter時，path用來描述這個Route匹配的URL的pathname
(2)當(dāng)使用HashRouter時,path用來描述這個Route匹配的URL的hash.

2.match

(1)params: Route的path可以包含參數(shù)，例如： 包含一個參數(shù)id。params就是用于從匹配的URL中解析出path中的參數(shù)，例如：當(dāng)URL="http://react.com/foo/1時，params={id:1}。
(2)isExact: 是一個布爾值，當(dāng)URL完全匹配時，值為true;當(dāng)URL部分匹配時，值為false.例如：當(dāng)path="/foo"，URL="http://react.com/foo"時，是完全匹配；當(dāng)URL="http://react.com/foo/1時，是部分匹配。
(3)path: Route的path屬性，構(gòu)建嵌套路由時會使用到。
(4)url: URL的匹配部分。

3.Route渲染組件的方式

(1)component
component的值是一個組件，當(dāng)URL和Route匹配時，component屬性定義的組件就會被渲染。

當(dāng)URL="http://react.com/foo"時，F(xiàn)oo組件會被渲染。
(2)render
render的值是一個函數(shù)，這個函數(shù)返回一個React元素，這個函數(shù)返回一個React元素。這種方式可以很方便的為待渲染的組件傳遞額外的屬性。
例如：
(

)}>
Foo組件接收了一個額外的data屬性。
(3)children children的值也是一個函數(shù)，函數(shù)返回要渲染的React元素。與之前兩種方式不同的是，無論是否匹配成功，children返回的組件都將會被渲染。但是當(dāng)匹配不成功時，match屬性為null。例如：
(

)} />
如果Route匹配當(dāng)前URL,待渲染元素的根節(jié)點(diǎn)div的class將被設(shè)置成active。

4.Switch和exact
當(dāng)URL和多個Route匹配時，這些Route都會執(zhí)行渲染操作。如果只想讓第一個匹配的Router渲染，那么可以把這些Route包到一個Switch組件中。
如果想讓URL和Route完全匹配時，Route才渲染，那么可以使用Route的exact屬性。Switch和exact常常聯(lián)合使用，用于應(yīng)用首頁的導(dǎo)航。
例如：


如果不使用Switch，當(dāng)URL的pathname為"/posts"時，和都會被匹配。
如果不使用exact,"/" "/posts" "/user1"等幾乎所有URL都會匹配第一個Route，又因為Switch的存在，后面的兩個Route永遠(yuǎn)也不會被匹配。使用exact,保證只有當(dāng)URL的pathname為"/"時，第一個Route才會被匹配。

5.嵌套路由

嵌套路由是指在Route渲染的組件內(nèi)部定義新的Route.例如：
const Posts = ({match}) => {

return(
    

        {/*這里match.url等于／posts*/}
        
        
    

)

}
當(dāng)URL的pathname為"/posts/react"時，PostDetail組件會被渲染；當(dāng)URL的pathname為"/posts"時，PostList組件會被渲染。Route的嵌套使用讓應(yīng)用可以更加靈活的使用路由。

6.鏈接

Link是React Router提供的鏈接組件，一個Link組件定義了當(dāng)點(diǎn)擊該Link時，頁面應(yīng)該如何路由：
例如：
const Navigation = () => (

)
Link使用to屬性聲明要導(dǎo)航到URL地址。to可以是string或object類型，當(dāng)to為object類型時，可以包含pathname、search、hash、state、四個屬性，例如：

pathname:"/posts",
search:"?sort=name",
hash:"#the-hash",
state:{formHome:true}

}}/>
除了使用Link外，我們還可以使用history對象手動實現(xiàn)導(dǎo)航，history中最常用的方法是push(path,[state])和replace(path,[state]),push會向瀏覽器歷史記錄中新增一條記錄，replace會用新紀(jì)錄替換當(dāng)前紀(jì)錄，例如：

history.push("/posts")
history.replace("/posts")

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

function BasicExample() {
return (


  

    
    
      
  • 
        Home
      
    • 
      
  • 
        About
      
    • 
      
  • 
        Topics
      
    •

);
}

function Home() {
return (


  
Home

);
}

function About() {
return (


  
About

);
}

function Topics({ match }) {
return (


  
Topics

  
    
    
  • 
      Rendering with React
    
    • 
    
  • 
      Components
    
    • 
    
  • 
      Props v. State
    
    • 
  


  
   
Please select a topic.
}
  />

);
}

function Topic({ match }) {
return (


  
{match.params.topicId}

);
}

export default BasicExample;

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

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

相關(guān)文章

  • react、react-router、redux 也許是最佳小實踐1

    摘要：通過聲明式編程模型定義組件，是最強(qiáng)大的核心功能。無論是的瀏覽器書簽，還是的導(dǎo)航功能，只要是可以使用的地方，就可以使用。二級路由使用渲染組件屬性狀態(tài)請選擇一個主題。也許是最佳小實踐地址，覺得有幫助的話，請點(diǎn)擊一下，嘿嘿 小前言 這是一個小小的有關(guān)react的小例子，希望通過一個小例子，可以讓新手更好的了解到react、react-router4.0、redux的集中使用方法。 這是基...

    Betta 評論0 收藏0

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

  • React 深入系列1：React 中的元素、組件、實例和節(jié)點(diǎn)

    摘要：中的元素組件實例和節(jié)點(diǎn)，是中關(guān)系密切的個概念，也是很容易讓初學(xué)者迷惑的個概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點(diǎn)和子組件實例的引用。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 中的元素、組件、實...

    LeviDing 評論0 收藏0

  • React 深入系列１：React 中的元素、組件、實例和節(jié)點(diǎn)

    摘要：中的元素組件實例和節(jié)點(diǎn)，是中關(guān)系密切的個概念，也是很容易讓初學(xué)者迷惑的個概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點(diǎn)和子組件實例的引用。 文：徐超，《React進(jìn)階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對React的理解...

    techstay 評論0 收藏0

發(fā)表評論

0條評論

kuangcaibao

男|高級講師

TA的文章

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