react-router 的基本使用

react-router-dom

react-router 提供了路由核心 api。如 Router, Route, Switch 等，但没有提供有关 dom 操作进行路由跳转的 api。
react-router-dom 提供了 BrowserRouter、Route、Link 等 api，可以通过 dom 操作触发事件控制路由。
react-router-dom 中依赖了 react-router，所以安装的时候只要安装 react-router-dom。
安装

npm install react-router-dom --save

如果安装版本在 >=6， Switch -->Routes
v5 版本的文档: https://v5.reactrouter.com/web/guides/quick-start
v6 git 地址: https://github.com/remix-run/react-router

基本集成步骤

1. 在 index.js 中

import { BrowserRouter } from "react-router-dom";
root.render(
);

2. app.js 文件

import { Routes, Route, Outlet, Link } from "react-router-dom";
// 其中 Routes 相当于v5的 Switch ,Outlet嵌套路由,index 配置默认首页路由

}>}>} />

以上是基本路由配置
3. 页面中匹配子路由
修改 app.js中的路由配置，新增tabs,在tabs页面中新增两个子路由tabOne,tabTwo
注：tabs路由配置path=“/tabs/*”，一定加 *，否则无法匹配到子路由

}>}>}>} />

tabs 页面配置，默认展示tabOne页面

const Tab = function () {return (
}>}>
)
}
// 因为 添加的是 tabs/* 所以 }> path的/不能省略

3.1 嵌套路由，见github 中example/basic/src/App.tsx

以下为完整代码
app.jsx

function App () {// 整体接口 左边是菜单，右边是详细的针对布局return (
}>}>{/* 根据下面自己路由进行 切换 */}}>} />
);
}

其中 Route 中 index 为默认渲染页面，tabs/*代码下面有子路由
tabs页面

import tabs from "@/style/tab.module.scss"
import OneTabChild from './tabChilds/one'
import TwoTabChild from './tabChilds/two'
import { Route, Routes, Link, Outlet } from "react-router-dom"const Tab = function () {return (
}>{/* 嵌套路由使用方法 */}}>}/>} />
)
}function TabOne () {return 
这是tabOne
}function TabTwo () {return (
这是tabTwo{/* 这是渲染嵌套路由的例子 */}
)
}export default Tab