react: react-router-dom

【相关文档】:印记中文-react-router-dom文档

1. 简介

react-router-dom是react的一个的路由插件库,

专门用来实现一个SPA应用(Simple Page Application),即单页面应用,在单页面应用中,点击导航组件跳转时浏览器的页面不会刷新(地址栏左边的刷新按钮不会刷新)

该插件一共有三个版本

• web: 专门用于web应用的的路由管理
• native: 用于 react-native应用的路由管理
• anywhere: 上面两种都可以适用

2. 相关API

1. BrowserRouter和HashRouter

路由器,用于管理标签包裹下的路由

可以包裹在根标签上,管理应用所有的路由

BrowserRouter: 直接使用H5推出的history对象的API

HashRouter: hash值,锚点的方式更新url地址,留下历史记录

2. Routes

Route必须写在父组件Routes里面

示例:

<Routes>
<Route path="/about" element=<About/> />
<Route path="/home" element=<Home/>/>
</Routes>

3. Route

用于注册路由

• path: 注册的路由地址
• element: 匹配到当前路由时需要渲染的组件
• exact: 开启精确匹配,有需要再开启,开启后可能导致匹配二级路由出现问题
• 默认为模糊匹配,

  示例:

<Route path="/about" element=<About/> />

4. Switch

匹配到第一个Router之后就不再匹配

5. Redirect

重定向地址