标签：匹配 渲染 Route React 详解 跳转 组件 路由
路由提供组件的详解
组件及其作用：
| 组件 | 作用 | |
|---|---|---|
| 路由模式 | BrowserRouter | 约定模式 为 history，使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步 |
| 路由模式 | HashRouter | 约定模式 为 hash，使用 URL 的 hash 来保持 UI 和URL 的同步 |
| 声明式跳转 | NavLink | 声明式跳转 还可以约定 路由激活状态 |
| 声明式跳转 | Link | 声明式跳转 无激活状态 |
| 重定向 | Redirect | 重定向 ~~ replace |
| 匹配并展示 | Route | 匹配组件，并展示组件。即匹配成功后，组件立即被替换成匹配的组件 |
| 排他性匹配 | Switch | 排他性匹配。如果不想使用包容性，那么使用Switch。 |
| 高阶组件 | withRouter | 把不是通过路由切换过来的组件中，将 history、location、match 三个对象传入props对象上（高阶组件） |
结构
-
BrowserRouter|HashRouter
App（或其它组件）
- NavLink|Link
- Route
- Redirect
- 子组件
- NavLink|Link
- Route
- …
- 子组件
BrowserRouter
| 属性 | 类型 | 作用 |
|---|---|---|
| basename | string | 所有位置的基本URL。如果您的应用是从服务器上的子目录提供的，则需要将其设置为子目录。格式正确的基本名称应以斜杠开头，但不能以斜杠结尾 |
| getUserConfirmation | Function | 用于确认导航的功能。默认使用window.confirm。 |
Route
| 属性 | 类型 | 作用 |
|---|---|---|
| path | string |object | 路由匹配路径。没有path属性的Route 总是会 匹配 |
| exact | boolean | 为true时，要求全路径匹配(/home)。路由默认为“包含”的(/和/home都匹配)，这意味着多个 Route 可以同时进行匹配和渲染 |
| component | Function |component | 在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染 |
| render | Function | 内联渲染和包装组件，要求要返回目标组件的调用 |
Link
| 属性 | 类型 | 作用 |
|---|---|---|
| to | string | 对象{pathname:,search:,hash:} | 要跳转的路径或地址 |
| replace | boolean | 是否替换历史记录 |
NavLink
| 属性 | 类型 | 作用 |
|---|---|---|
| to | string|对象{pathname:,search:,hash:} | 要跳转的路径或地址 |
| replace | boolean | 是否替换历史记录 |
| activeClassName | string | 当元素被选中时，设置选中样式，默认值为 active |
| activeStyle | object | 当元素被选中时，设置选中样式 |
Switch
该组件用来渲染匹配地址的第一个Route或者Redirect，仅渲染一个路由，排他性路由,默认全匹配(场景：侧边栏，引导选项卡等)
| 属性 | 类型 | 作用 |
|---|---|---|
| location | string object | |
| children | node |
Redirect
该组件用来渲染匹配地址的第一个Route或者Redirect，仅渲染一个路由，排他性路由,默认全匹配(场景：侧边栏和面包屑，引导选项卡等
| 属性 | 类型 | 作用 |
|---|---|---|
| from | string | 来自 |
| to | string object | 去向 |
| push | boolean | 添加历史记录 |
| exact | boolean | 严格匹配 |
| sensitive | boolean | 区分大小写 |
标签：匹配,渲染,Route,React,详解,跳转,组件,路由 来源： https://blog.csdn.net/weixin_42924369/article/details/118880432
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。