react學習六 react路由

2021-09-13 19:16:08 字數 1376 閱讀 8784

react-router

安裝包

yarn add react-router-dom
匯入路由模組

import reactdom from 'react-dom'
route 表示乙個路由規則， 在 route 上，有兩個比較重要的屬性， path component

link 表示乙個路由的鏈結 ，就好比 vue 中的 

import  from 'react-router-dom'
在乙個 hashrouter 中，只能有唯一的乙個根元素

在乙個**中，只需要使用 唯一的一次 就行了

render()
link 表示乙個路由的鏈結 ，就好比 vue 中的 

render()
route 建立的標籤，就是路由規則，其中 path 表示要匹配的路由，component 表示要展示的元件，在 vue 中有個 router-view 的路由標籤，專門用來放置匹配到的路由元件的，但是在 react-router 中，並沒有類似於這樣的標籤，而是直接把 route 標籤，當作的佔位符

因此route 具有兩種身份：

1. 是乙個路由匹配規則

2. 是 乙個佔位符，表示將來匹配到的元件都放到這個位置， 如果想讓路由規則，進行精確匹配，可以為 route，新增 exact 屬性，表示啟用精確匹配模式 

render()
電影
預設情況下，路由中的規則，是模糊匹配的，如果路由可以部分匹配成功，就會展示這個路由對應的元件，所以使用exact這個屬性，如果要匹配引數，可以在匹配規則中，使用 : 修飾符，表示這個位置匹配到的是引數

在movie元件例項中：

列印movie元件例項可以發現，通過路由傳進來的引數都放在了元件例項的match的params屬性下面，所以如果想要從路由規則中，提取匹配到的引數進行使用，可以使用 this.props.match.params.*** 來訪問

React路由學習 四

實現思路 1.我們拓展之前寫好的route元件，讓其支援render方法 2.在重定向的時候儲存之前的狀態，並傳遞給下乙個元件 3.新建元件 protected 因為該元件不需要自己的私有狀態，這裡function 4.引入route元件，並在protected返回route元件，具體渲染還是使用r...

React路由學習 五

這裡主要是根據之前的 實現乙個自定義導航，我們可以，選中的導航新增class，import react from react import from react router dom 渲染route有三種方式 component render children export default exac...

react 動態修改路由 React 動態路由

封裝乙個高階元件，用來實現將普通的元件轉換成動態元件import react from react const asynccomponent loadcomponent class asynccomponent extends react.component catch err this.state...