react-router-dom v4+ 版本5.1.2

文檔地址： https://reacttraining.com/react-router/web/guides/quick-start

 

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

主要組件：

     router 路由組件底層接口 、

     route 匹配規則並展示當前組件 exact 完全匹配、path 匹配路徑、conponent 展示的組件）

     Link  路由跳轉組件（to）

    Switch,

 

Api狗子 ：useParams ， useRouteMatch ,useLocation,useHistory

   let { topicId } = useParams(); //解構路由參數

useRouteMatch  用與 <Route> 一樣的方式匹配當前 URL，但是不會渲染對應的組件，只是返回 match

useLocation 獲取路由對象 返回 react router 封裝的 location 實例

useHistory 可以返回上一個網頁  goback()  去其他頁面  push('/')  replace（） 返回 react router 封裝的 history 實例

具體用法

一、 用法其實是跟組件用法一樣、 import (BrowserRouter  as Router ,Route, Switch ) from 'react-router-dom'

<BrowserRouter> 組件包裹組件

  <page /> 這個是不變組件 

   <Routers/>  這裏可以是返回整個路由組件   嵌套組件  （跟新當前路由是 此組件不變換 page 不變）

</BrowserRouter>

 

二、 Routers 

三、 嵌套路由

四、 路由規則