关于react路由的介绍

最新推荐文章于 2024-07-28 22:28:43 发布

IT__zz

最新推荐文章于 2024-07-28 22:28:43 发布

阅读量339

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/IT__zz/article/details/103693413

版权

本文介绍了如何在React项目中安装和使用react-router-dom，详细讲解了HashRouter与BrowserRouter的区别、嵌套路由的实现、带参数路由的使用方法以及如何在组件中利用Switch进行精确匹配。通过实例展示了路由参数的传递和接收，帮助读者掌握React路由的实战技巧。

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

《【风萧萧兮易水寒，壮士一去兮不复还】》
不知不觉想起了这句诗，今天圣诞节，祝大家圣诞节快乐！
来看正文：

要是用react路由就必须要安装react-router-dom
在项目命令行中，执行

cnpm install react-router-dom -S

路由内置组件包括
HashRouter （hash方式锚点路由地址栏以#号形式跳转也叫前端路由）
BrowserRouter（浏览器路由器也叫后端路由）
Route （配置路由）
Link ：（普通的路由跳转）

格式：
1.HashRouter 路由书写格式

 <HashRouter>
   <Link to="/a"></Link> //跳转到a页面
   <Route  path="/a" component={
   A}/>//引入A组件，进行跳转
</Hashrouter>

2.BrowserRouter路由书写格式

 <BrowserRouter>
   <Link to="/a"></Link> //跳转到a页面
   <Route  path="/a" component={
   A}/>//引入A组件，进行跳转
</BrowserRouter>

BrowserRouter:浏览器路由器（即为后端路由，可以连接后端数据）
HashRouter: hash方式锚点路由地址栏以#号形式跳转（即为前端路由，只在前端能够使用）

嵌套路由就是：【Route配置好一个路由之后，在组件中又配置一个Route，为二级嵌套路由,（可以写嵌套多个）】

 <HashRouter>
   <Link to="/a"></Link> //跳转到a页面

关注