react router 4

CoderBear 發布于2019-08-22 17:10 / 1419人閱讀

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

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

Router

React Router 4 中，你可以將各種組件及標簽放進組件中，它用來保持與 location 的同步。tips: 組件下只允許存在一個子元素?？梢韵褚韵路绞绞褂茫?/p>

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

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

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

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

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

：從不會改變地址；

組件有如下屬性：

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

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

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

提供了三種渲染內容的方法：

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

：當匹配成功后調用該函數。該過程與傳入component參數類似,這種方式對于內聯渲染和包裝組件卻不引起意料之外的重新掛載特別方便；

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

tips:的優先級要比高,通常component參數與render參數被更經常地使用。children參數偶爾會被使用，它更常用在path無法匹配時呈現的"空"狀態。

會遍歷自身的子元素（即路由）并對第一個匹配當前路徑的元素進行渲染

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

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

to（string/object）：要跳轉的路徑或地址；

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

// Link組件示例

// to為string
關于

// to為obj


// replace

React Router擁有優質的文檔，你可以查看并從中了解更多的信息

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

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

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

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

tinysun1234 2019-08-23 14:49 評論0 收藏0
從項目中由淺入深的學習react (2)

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

leap_frog 2019-08-23 16:42 評論0 收藏0
利用react-router4的react-router-config做路由鑒權

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

Amos 2019-08-22 18:03 評論0 收藏0
手挽手帶你學React：三檔 React-router4.x的使用

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

SunZhaopeng 2019-08-23 15:11 評論0 收藏0
react-router @4用法整理

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

piglei 2019-08-21 17:52 評論0 收藏0