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

資訊專欄INFORMATION COLUMN

react router 4

CoderBear / 1407人閱讀

摘要：也走了的路，咳，一切都成組件。中，你可以將各種組件及標(biāo)簽放進(jìn)組件中，它用來保持與的同步。組件下只允許存在一個子元素。參數(shù)偶爾會被使用，它更常用在無法匹配時呈現(xiàn)的空狀態(tài)。默認(rèn)為組件示例為關(guān)于為擁有優(yōu)質(zhì)的文檔，你可以查看并從中了解更多的信息

React Router V4 也走了react的路，咳，一切都成組件。例如Route、Link、Switch等都是組件。
react-router和react-router-dom是react router拆分出來的，平時使用只需要引入react-router-dom，當(dāng)然，如果搭配redux，你還需要使用react-router-redux。

Router

React Router 4 中，你可以將各種組件及標(biāo)簽放進(jìn) 組件中，它用來保持與 location 的同步。tips: 組件下只允許存在一個子元素。可以像以下方式使用：

import { BrowserRouter } from "react-router-dom"
ReactDOM.render((
  
      //在app中進(jìn)行拆分，放網(wǎng)站的導(dǎo)航鏈接，以及其他的
  
), document.getElementById("main"))

：使用 HTML5 提供的 history API（pushState,
replaceState以及popstate事件） 來保持 UI 和 URL
的同步，在服務(wù)區(qū)來管理動態(tài)請求時，需要使用組件；

：使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL
的同步，一般靜態(tài)頁面使用；

：能在內(nèi)存保存你 “URL” 的歷史紀(jì)錄(并沒有對地址欄讀寫)；

：為使用React Native提供路由支持；

：從不會改變地址；

組件有如下屬性：

path: 路由匹配路徑。（沒有path屬性的Route 總是會 匹配）；

exact：為true時，則要求路徑與location.pathname必須完全匹配,如 path="/test",你就只能匹配到"/test"；

strict：true的時候，有結(jié)尾斜線的路徑只能匹配有斜線的location.pathname，如path="/test/"只匹配 "/test/*"；

提供了三種渲染內(nèi)容的方法：

：在地址匹配的時候React的組件才會被渲染，route props也會隨著一起被渲染；

：當(dāng)匹配成功后調(diào)用該函數(shù)。該過程與傳入component參數(shù)類似,這種方式對于內(nèi)聯(lián)渲染和包裝組件卻不引起意料之外的重新掛載特別方便；

：與render屬性的工作方式基本一樣，除了它是不管地址匹配與否都會被調(diào)用；

tips:的優(yōu)先級要比高,通常component參數(shù)與render參數(shù)被更經(jīng)常地使用。children參數(shù)偶爾會被使用，它更常用在path無法匹配時呈現(xiàn)的"空"狀態(tài)。

會遍歷自身的子元素（即路由）并對第一個匹配當(dāng)前路徑的元素進(jìn)行渲染

import { Switch, Route } from "react-router"

當(dāng)你點擊時，URL會更新，組件會被重新渲染，但是頁面不會重新加載。
Link組件屬性：

to（string/object）：要跳轉(zhuǎn)的路徑或地址；

replace（bool）：為 true 時，點擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址；為 false
時，點擊鏈接后將在原有訪問歷史記錄的基礎(chǔ)上添加一個新的紀(jì)錄。默認(rèn)為 false；

// Link組件示例

// to為string
關(guān)于

// to為obj


// replace

React Router擁有優(yōu)質(zhì)的文檔，你可以查看并從中了解更多的信息

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

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

相關(guān)文章

  • [ 一起學(xué)React系列 -- 11 ] React-Router4 (1)

    摘要：中的包中的包主要有三個和。的理念上面提到的理念是一切皆組件以下統(tǒng)一稱組件。從這點來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認(rèn)為是或的路由入口。將該標(biāo)示為嚴(yán)格匹配路由。的屬性追加一條。 2019年不知不覺已經(jīng)過去19天了，有沒有給自己做個總結(jié)？有沒有給明年做個計劃？當(dāng)然筆者已經(jīng)做好了明年的工作、學(xué)習(xí)計劃；同時也包括該系列博客剩下的博文計劃，目前還剩4篇：分別...

    tinysun1234 評論0 收藏0

  • 從項目中由淺入深的學(xué)習(xí)react (2)

    摘要：序列文章從項目中由淺入深的學(xué)習(xí)微信小程序和快應(yīng)用前言從和原生兩個項目來介紹的使用搞懂這兩個項目上手?jǐn)]代碼篇效果圖項目歡迎技術(shù)棧路由版本狀態(tài)管理組件字體適配方案適配技能點分析技能點對應(yīng)的種定義組件方法函數(shù)式定義的無狀態(tài)組 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章 從項目中由淺入深的學(xué)習(xí)vue,微信小程序...

    leap_frog 評論0 收藏0

  • 利用react-router4的react-router-config做路由鑒權(quán)

    摘要：一是一個幫助我們配置靜態(tài)路由的小助手。以上修改了部分源碼并完成了我們想要的效果。 一、react-router-config 是一個幫助我們配置靜態(tài)路由的小助手。其源碼就是一個高階函數(shù) 利用一個map函數(shù)生成靜態(tài)路由 import React from react; import Switch from react-router/Switch; import Route from re...

    Amos 評論0 收藏0

  • 手挽手帶你學(xué)React：三檔 React-router4.x的使用

    摘要：我們在內(nèi)部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機制，我們需要把值綁定進(jìn)入內(nèi)部。 手挽手帶你學(xué)React入門三檔,帶你學(xué)會使用Reacr-router4.x,開始創(chuàng)建屬于你的React項目 什么是React-router React Router 是一個基于 React 之上的強大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時保持頁面與 URL 間的同步。通俗一...

    SunZhaopeng 評論0 收藏0

  • react-router @4用法整理

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

    piglei 評論0 收藏0

發(fā)表評論

0條評論

CoderBear

男|高級講師

TA的文章

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