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 区分大小写
上一篇:react问题录-4 Error: A <Route> is only ever to be used as the child of <Routes>


下一篇:重新点亮linux 命令树————修改网络配置[十一四]