react路由常用组件是什么

发布时间：2022-03-22 09:37:08 作者：小新
来源：亿速云阅读：354

这篇文章给大家分享的是有关react路由常用组件是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

react路由常用组件有：1、BrowserRouter，设置路由模式为history；2、HashRouter，设置路由模式为hash；3、NavLink；4、Link；5、Redirect；6、Route；7、withRouter等等。

react路由常用组件是什么

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

组件及其作用：

	组件	作用
路由模式	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

属性	类型	作用
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，仅渲染一个路由，排他性路由,默认全匹配(场景：侧边栏和面包屑，引导选项卡等

感谢各位的阅读！关于“react路由常用组件是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

相关阅读