react路由有哪些常用组件
时间:2022-03-21 18:40
react路由常用组件有:1、BrowserRouter,设置路由模式为history;2、HashRouter,设置路由模式为hash;3、NavLink;4、Link;5、Redirect;6、Route;7、withRouter等等。 本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。 组件及其作用: 结构 BrowserRouter|HashRouter App(或其它组件) BrowserRouter Route Link NavLink Switch 该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏,引导选项卡等) Redirect 该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏和面包屑,引导选项卡等 【相关推荐:Redis视频教程】 以上就是react路由有哪些常用组件的详细内容,更多请关注gxlsystem.com其它相关文章!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对象上(高阶组件) 属性 类型 作用 basename string 所有位置的基本URL。如果您的应用是从服务器上的子目录提供的,则需要将其设置为子目录。格式正确的基本名称应以斜杠开头,但不能以斜杠结尾 getUserConfirmation Function 用于确认导航的功能。默认使用 window.confirm
。属性 类型 作用 path string |object 路由匹配路径。没有path属性的Route 总是会 匹配 exact boolean 为true时,要求全路径匹配(/home)。路由默认为“包含”的(/和/home都匹配),这意味着多个 Route 可以同时进行匹配和渲染 component Function |component 在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染 render Function 内联渲染和包装组件,要求要返回目标组件的调用 属性 类型 作用 to string | 对象{pathname:,search:,hash:} 要跳转的路径或地址 replace boolean 是否替换历史记录 属性 类型 作用 to string|对象{pathname:,search:,hash:} 要跳转的路径或地址 replace boolean 是否替换历史记录 activeClassName string 当元素被选中时,设置选中样式,默认值为 active activeStyle object 当元素被选中时,设置选中样式 属性 类型 作用 location string object children node 属性 类型 作用 from string 来自 to string object 去向 push boolean 添加历史记录 exact boolean 严格匹配 sensitive boolean 区分大小写