react 路由的组件说明、路由的执行过程

最新推荐文章于 2022-11-14 14:59:35 发布
最新推荐文章于 2022-11-14 14:59:35 发布
阅读量266 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45877477/article/details/126074448
版权

目录

一 路由的组件说明

1 Router组件

2 Link组件

3 Route组件

二 路由的执行过程

一 路由的组件说明

1 Router组件


包裹整个应用,一个React应用只需要使用一次
除了BrowserRouter还有一种Router是HashRouter,但是HashRouter不是很好用(地址栏有#)

2 Link组件


用于指定导航链接(Link组件最终会被编译成a标签)
Link组件的to属性的值:
    最终会被编译成a标签的href
    还表示浏览器地址栏中的pathname

 

3 Route组件


指定路由展示组件相关信息
path属性: 是路由规则
component属性: 表示当路由规则匹配时,要展示的组件
组件展示的规则:Route组件写在哪,渲染出来的组件就展示在哪
 

二 路由的执行过程

1 点击Link组件(a标签),修改浏览器地址栏中的url
2 react路由监听到地址栏url的变化
3 react路由内部会遍历所有Route组件,使用路由规则path与pathname进行匹配
4 当路由规则path能够匹配地址栏中的pathname时,就展示该Route组件的内容
 

 

 

梨轻巧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React路由 及 React 路由中核心组件
yangyang_A的博客
08-03 1768
文章目录React 路由前端路由React Router基于 Web 的 React Routerreact-router-dom 的核心组件Router组件Route 组件exact 属性component 属性Route:render 路由组件传参动态路由Link 组件to 属性NavLink 组件activeStyleactiveClassNameisActiveSwitch 组件Redirect 组件withRouter 组件 React 路由 react-router路由路官网 安装: npm
React路由组件都被渲染
Tec Zoom
09-09 619
由于访问组件时，ur地址l的开头都是‘/’，所以两个组件都被渲染了，如下图所示，products和home都被渲染了。 要解决这个问题，有两种方法： 1.使用exact属性。 在home组件前面加上exact，只有完全匹配才会生效。 <div className="content"> <Route path="/products" component={Products} /&...
react中的路由----路由的执行过程
imkaifan的博客
09-15 143
点击 Link 组件（a标签），修改了浏览器地址栏中的url 。 React 路由监听到地址栏url 的变化。 React 路由内部遍历所有Route 组件，使用路由规则（path ）与 pathname 进行匹配。 当路由规则（path）能够匹配地址栏中的pathname 时，就展示该Route 组件的内容。 只要url变化了，是所有的路由规则都要遍历一遍 ...
什么是路由,如何在react中使用路由react-router-dom
胡老大的唯一大老婆的博客
07-03 250
路由就是根据URL的不同显示不同的内容 react-router-dom的使用方法: npm install react-router-dom 引入:App.js中引入 import { BrowserRouter,Route} from ‘react-router-dom’ 使用 基本使用 跳转 BrowserRouter代表路由,Route代表路由规则 <BrowserRoute...
前端路由原理及react-router的常用组件
hello ice cream
04-11 313
在react中，通常都是使用单页面应用(SPA)，即整个页面只有一个html，然后通过不同的url地址进行组件的匹配和切换。 我们看到的url地址可能会有两种形式，一种是 localhost:3000/home，一种是 localhost:3000/#/home，两种地址的区别在于有无#，有#的是根据hash来进行匹配，即url中的锚点，本质上是通过location.hash来改变href，hash后的内容是不会发送给服务器的，没有#是通过html5的history来进行跳转，两者跳转后都不会进行刷新。
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，...在本篇文章中，我们介绍了 React 路由配置的基础知识、方式、组件、示例代码等，希望能够帮助您更好地理解和使用 React 路由配置。
react非路由跳转组件获取上下文
01-08
react非路由跳转组件获取上下文react非路由跳转组件获取上下文解决方案1.通过路由跳转2.通过属性传递3.通过withRouter包装 react非路由跳转组件获取上下文解决方案 在react组件中，不是所有组件会通过路由跳转，也...
详解react如何在组件中获取路由参数
12-29
假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？ 这种场景就需要用到路由的参数功能，增加一条包含参数的路由配置。 import List from './...
React路由鉴权的实现方法
11-30
在每个需要鉴权的路由组件外包裹一个`PrivateRoute`组件，该组件负责检查用户权限。 ```jsx import { Route, Redirect } from 'react-router-dom'; function PrivateRoute({ component: Component, ...rest }) { ...
React路由基础、使用与执行
weixin_46116626的博客
03-17 1060
React路由基础、使用与执行
React路由的使用步骤和执行过程
Aa112233aA1的博客
06-16 366
前端web开发面试：React路由的使用步骤和执行过程
关于深入理解react的路由原理
chengxiu3482的博客
03-29 3816
前言： react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页（SPA)应用，本文首先从前端路由的原理出发，详细介绍了前端路由原理的...
React 路由状态管理总结
前端大全
05-12 2148
（点击上方公众号，可快速关注）来源：今日头条技术团队mp.weixin.qq.com/s/0y-79NrBrKS-vta_iI5Tcg一、依赖（Dependencies）...
React整体流程
热门推荐
咸鱼的星空
03-29 1万+
文章地址：http://react-china.org/t/react-redux/9072 react的组件化 react的一个组件很明显的由dom视图和state数据组成，两个部分泾渭分明。state是数据中心，它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别，没了Controller控制器，那用户交互怎么处理，数据变化谁来管理？然而这
【React】SPA - 路由机制 - react-router-dom - 基本路由 - 嵌套路由 - 传递参数 - 路由跳转
YK菌的博客
06-15 1360
前端路由
面试官：说说你对React Router的理解？常用的Router组件有哪些？
weixin_44475093的博客
07-21 836
一、是什么react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面...
React路由基础、路由基本使用、组件说明、执行过程、编程式导航、默认路由
七七的博客
11-14 1212
现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件。
react基础Day04-React原理揭秘&React路由基础
码化疼
11-30 344
React原理揭秘 目标 能够说出React组件的更新机制 能够对组件进行性能优化 能够说出虚拟DOM和DIff算法 组件更新机制 setState() 的两个作用 修改state 更新组件 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件） 组件性能优化 减轻state 减轻state：只存储跟组件渲染相关的数据（比如：count...
React渲染顺序及useEffect执行顺序探究（含并发模式）
老司机的后备箱
06-11 6046
在不借助任何演示的情况下，你能清楚地说出 React 组件的渲染顺序以及 useEffect 的执行顺序吗？你知道 React18 『并发模式』下执行情况是不同的吗？ 下面就让我们一起来看一看吧～先来看目前大部分人还在用的16或者17版本，也就是默认的渲染情况，我们来写一个 Demo，这个 Demo 包含一个父组件（），两个子组件（，互为兄弟组件），每个组件在 ， 和 的时候打印自身信息。这里，我们在 App 组件下渲染两个连续的 SubApp 组件，一个叫，一个叫，来看执行结果。由此，我们可以得出结论，
react 普通组件转换为路由组件
最新发布
06-03
要将 React 普通组件转换为路由组件，需要使用 React Router 库中提供的 `withRouter` 函数。具体步骤如下： 1. 首先，安装 `react-router-dom` 库： ```bash npm install react-router-dom ``` 2. 在需要转换...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值