深入理解React Router

2021-10-16 06:19:54 字數 1303 閱讀 8741

引言

從後端開發轉到前端開發,對react router的概念及使用一直有點困惑,因此決定寫篇文章,梳理一下。

react router的簡介

react router 是乙個基於 react 之上的強大路由庫,它可以讓你向應用中快速地新增檢視和資料流,同時保持頁面與 url 間的同步。通俗來說,它通過管理url,實現元件的切換和狀態的變化,從而幫助我們的程式在不同的url下展示不同的內容。

react router的版本更新

可以看到從2023年至今,react router 已經從v0版本更新到了 v5 版本。其實可以分為兩個大版本,3.x及之前是個大的版本,4.x之後又是乙個大的版本。兩個大版本之間不僅api完全不同,考慮路由的方式也完全不同。

從v4.0.0版本開始,react router也像 react 家族中的其他成員一樣, 做了核心庫和繫結庫分離,具體為:

而v5版本與4.x完全向後相容,值得關注的是在v5.1.0版本增加了基於 react hooks 的一些 api,有useparams、uselocation、usehistory和useroutematch,讓我們可以在元件中不接受 route props 就可以拿到路由資訊 ,除了利用了 react hooks,react router 中還有其他充分展示了 react 特性的 api,比如 利用了 render props,withrouter 利用了高階元件。

react router的使用

react router 只是乙個核心庫,具體使用時要根據不同的應用場景選擇不同的繫結庫,比如:如果在web應用程式中使用 react router,就安裝 react-router-dom 庫,如果在 react native 中使用 react router ,就應該安裝 react-router-native 庫。

一、重點講解react-router-dom

1. 主要成分

react router中的元件主要分為三類:

import react from

"react"

;import reactdom from

"react-dom"

;import

from

"react-router-dom"

;function()

reactdom.

render

(>

<

/browserrouter>

, document.

getelementbyid

("root"))

;

未完待續。。。。。

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...

mysql 索引深入理解 深入理解MySql的索引

為什麼索引能提高查詢速度 先從 mysql的基本儲存結構說起 mysql的基本儲存結構是頁 記錄都存在頁裡邊 各個資料頁可以組成乙個雙向鍊錶每個資料頁中的記錄又可以組成乙個單向鍊錶 每個資料頁都會為儲存在它裡邊兒的記錄生成乙個頁目錄,在通過主鍵查詢某條記錄的時候可以在頁目錄中使用二分法快速定位到對應...

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...