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 

三、 嵌套路由

四、 路由规则