路由提供组件的详解、组件及其作用、结构、Route、Link、NavLink、Switch、Redirect

最新推荐文章于 2024-08-06 18:45:00 发布

Ensoleile2021

最新推荐文章于 2024-08-06 18:45:00 发布

阅读量793

点赞数

文章标签： react.js 前端 jsx

本文链接：https://blog.csdn.net/weixin_51525398/article/details/121598445

版权

本文详细介绍了React Router中的关键组件，包括BrowserRouter、HashRouter作为路由提供组件，以及它们的使用场景。组件结构中，App组件下通常包含NavLink、Link、Route和Redirect。NavLink和Link用于导航，Route用于根据路径渲染组件，而Redirect则用于重定向。Switch组件则用于排他性路由，仅渲染匹配的第一个Route或Redirect，常用于侧边栏和引导选项卡等场景。

摘要由CSDN通过智能技术生成

路由提供组件的详解

组件及其作用：

	组件	作用
路由模式	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对象上（高阶组件）