开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React -使用Route(path，exact，component)在指定路径上呈现组件，但只有在路径匹配时单击刷新才会呈现

React是一个用于构建用户界面的JavaScript库。它通过组件化的方式，将用户界面拆分成独立的、可复用的部分，使得开发者可以更加高效地构建复杂的应用程序。

在React中，可以使用Route组件来定义路由规则，以便在指定的路径上呈现相应的组件。Route组件接受三个主要的属性：path、exact和component。

path：指定路由的路径，可以是一个字符串或者一个正则表达式。当浏览器的URL与该路径匹配时，Route组件会渲染指定的组件。
exact：一个布尔值，用于指定是否需要精确匹配路径。如果设置为true，则只有当浏览器的URL与路径完全匹配时，才会渲染组件。
component：指定需要呈现的组件。

在React中，当路径匹配时，点击刷新页面会重新加载整个应用程序，这是因为React是一个单页面应用程序（SPA），所有的路由都是在前端进行处理的。如果不希望在路径匹配时刷新页面，可以使用React Router库提供的Link组件来代替普通的a标签，这样点击链接时，只会更新URL而不会刷新整个页面。

React Router是React官方提供的用于处理路由的库，它提供了一系列的组件和API，用于实现前端路由功能。React Router可以帮助开发者在React应用中实现页面之间的切换和导航，提供了更好的用户体验。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动推送：https://cloud.tencent.com/product/umeng_push
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/tencent_metaverse

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

（重磅来袭）react-router-dom 简明教程

是 Link 的一个特殊版本，当呈现的元素与当前URL匹配时，它将向该元素添加样式属性。...这将与className样式叠加 activeStyle 内嵌方式声明active状态样式 exact 布尔类型，为true是路径完全匹配才会添加active class strict 路径匹配是否严格...strict属性：路径匹配是否严格，区分斜杠 sensitive属性: 路径匹配是否大小写敏感 Route 路由组件可能是反应路由器中最重要的组件，了解和学习使用好。...它最基本的职责是在路径与当前URL匹配时呈现某个UI route component 只有路由匹配才会挂载component指定的组件 ReactDOM.render( <..., 是否精确匹配isExact, 路径path, url 路由组件(Route component)中使用this.props.match 路由render函数中解构出match对象Route render

11.9K1 0

React Router v4教程：为你的 React 应用创建路由

用户看上去是在多个页面之间进行切换，但实际上，根据我们的需要实现了多个视图，每个单独的组件被重新渲染。 React 是如何实现这一目标的？这就是'History'的概念出现在图片中的地方。...如果用户指定的位置与中定义的路径匹配，则可以通过两种方式定义视图：创建 `` 中指定的 Component 使用内联 `render` 函数如果指定的URL与定义的路径不匹配...这是 React Router v4 声明性质的一个的例子。 v4 中的路由为 inclusive 意味着可以同时呈现多个路由。我们使用 exact 属性来解决多匹配中的问题。...在前面的例子中没有使用 exact，URL '/' 将匹配路径 '/'、'/about' 和 '/topics'。...Switch：虽然我们可以在一个标签中封装几个路由。如果我们希望一次只渲染一个路径组件，可以使用标签。它按顺序检查每个路径的匹配并在找到第一个匹配后停止。

2K2 0

React Router入门指南（包括Router Hooks）

path：这是route的路径。在这里，我们使用 / 定义主页的路径。 render：到达路由时将显示内容。在这里，我们将向用户呈现欢迎消息。...在某些情况下，提供这样的路由是完全可以的，但请想象一下，当我们需要处理真实组件时，使用render可能不是正确的解决方案。那么，我们该如何显示一个真实的组件呢？...即使我们切换到其他页面，Home组件也会一直显示。原因是React Router将检查定义的路径是否以/开头（如果是），它将呈现组件。...在这里，我们的第一个路径以/开头，因此Home组件每次都会呈现。但是，我们仍然可以通过将exact属性添加到Route来更改默认行为。...App.js 现在，对home组件的路由添加了exact属性，那么只有与完整路径匹配时才会呈现。

12K2 0

React路由

"; hash模式下#后边的路径不会发给服务器，不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面，在处理相对路径方面的一些问题时，使用HashRouter可以解决...">页面1 Route组件 Route组件：指定路由展示的组件（注册路由） path属性：路由规则 component属性：指定当路由匹配时要展示的组件 Route组件写在哪，渲染出来的组件就展示在哪...比如下方代码，在/home路径匹配到Home组件的情况下，依然会继续往下匹配到Test组件但是一个路由一般只对应一个组件，在已经匹配到的情况下就没有必要继续往下匹配了。...from匹配（可以用正则）时，才会重定向到to属性指定的路径 Redirect的from属性如果没有，则默认是匹配所有的路径 exact 完全匹配 from；相当于 Route.exact。...) 精确匹配给 Route组件添加exact属性，让其变为精确匹配模式精确匹配：只有当path和 pathname完全匹配时才会展示该路由严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

2.5K1 0

React路由的模糊匹配与严格匹配

模糊匹配模糊匹配是React Router的默认匹配方式。在模糊匹配中，路由会根据URL的路径部分进行匹配。当URL的路径部分与路由的路径部分部分匹配时，就会触发匹配。...path="/" exact component={Home} /> );};...在Route组件中，我们使用path属性指定路由的路径。exact属性用于指定该路由是否需要进行精确匹配，默认为模糊匹配。...严格匹配严格匹配要求URL的路径必须与路由的路径完全匹配。只有当URL的路径与路由的路径完全相同时，才会触发匹配。...这意味着只有当URL的路径与path="/about"完全匹配时，才会触发About路由组件。例如，当URL为/about时，会触发About路由组件，因为它与path="/about"完全匹配。

1.8K2 0

react-router 的使用与优化

Route 中的 exact 属性表示只有 path 完全匹配时才渲染对应的组件，上面例子中，如果没有 Switch 组件和 exact 属性时，当访问 /123 路由页时，/ 路由也会匹配到，因为 /...使用 Switch 时，被 Switch 包裹的 Route 就只能匹配到一个，当上面的路由匹配到后，Switch 下面的组件就会不再匹配了。...比如如果把 exact 属性都去除，这时访问 /123 页面时，渲染的却只有 Home 组件，这是因为 Home 组件的路由是 /，而 /123 包含它，Switch 从上往下匹配，第一个符合条件，下面的路由就不再匹配...在 Route 组件中除了使用 component 指定一个组件外，还可以使用 render 函数，这个函数返回一个 React 组件，表示路由要渲染的内容： <Route exact path="/"...当点击 Link 包裹的文字后，就会使用该路径，并将路径匹配到的组件加载到页面上。

3.2K1 0

react-router4

Route有path，component和exact属性，path为跳转路由路径，component为跳转的组件。...Route不是全匹配，所以当我们进行路由判断的时候，比如一个路径为"/"，一个为“/news”这样我们进行跳转“/news”时任然会匹配到“/”，所以这时我们需要使用exact加在有"/"路径的Route...上，加上以后路由绝对相等才会去匹配 //Route组件中传参用：高阶组件: withRouter 在我们使用Route组件时

1.5K3 0

React Switch的使用

Switch的概述在React中，Switch组件用于包裹一组Route组件，并根据URL的路径匹配来选择渲染第一个匹配的路由组件。...当URL与某个路由的路径匹配时，Switch会停止继续匹配后续的路由，并只渲染第一个匹配的路由组件。Switch组件的主要作用是确保只有一个路由会被渲染，避免多个路由同时匹配的情况。...exact path="/" component={Home} /> <Route component...在Switch组件中，我们定义了三个Route组件。第一个Route组件使用exact属性，表示只有在URL精确匹配时才会渲染该路由组件。...第二个Route组件没有指定exact属性，它会在URL部分匹配时渲染。最后一个Route组件没有指定path属性，它会在没有其他路由匹配时渲染，用于处理404页面。

7751 0

React Router V6详解

相比于传统的Web应用，SPA一个最重要的特性就是改变路由时不会触发整个页面的刷新，只会刷新需要刷新的模块或组件。...1.2 路由在前端应用中，路由可以理解为是一种映射关系，即路径与组件/函数的对应关系，比如，当用户访问’/dashboard’时，页面将呈现各种仪表板组件，如图表和表格；当用户访问’/user’时，页面将列出各种用户属性...Link不再支持component属性； NavLink 的exact属性替换为end；添加Outlet组件，用于渲染子路由；使用之前，可以先使用下面的命令进行安装。...改变路径url时不触发页面刷新当url发生改变时会重新渲染url对应的界面所以，我们谈React Router的原理，其实就是分析订阅和操作history堆栈、URL 与router匹配以及渲染router...； Parent Route：带有子路由的父路由节点； Outlet：匹配match中的下一个匹配项的组件； Index Route ：当没有path时，在父路由的outlet中匹配； Layout

7.7K5 0

一天梳理React面试高频知识点

React-intl提供了两种使用方法，一种是引用React组件，另一种是直接调取API，官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。...当一个匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的将始终被匹配。...path="/login" component={Login}>Route 组件的 path 属性用于匹配路径，因为需要匹配 / 到 Home，匹配 /login 到 Login，所以需要两个...这是就用到了exact属性，它的作用就是精确匹配路径，经常与联合使用。...Route exact path="/" component={Home}> </Route

2.8K2 0

React-Router

Route组件组件是react router的最重要的组件，当location与Route的path匹配时渲染Route中的Component。...如果多个Route匹配，那么这些Route的Component都会被渲染。 Route组件的属性： path - 字符串类型，它的值就是用来匹配url的。...component - 它的值是一个组件，在path匹配成功之后会渲染这个组件。 exact - 指明这个路由是不是排他匹配。 strict - 指明路径只匹配以斜线结尾的路径。...replace属性设置为true时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。设置为false时，点击链接后将在原有访问历史的基础上添加一个新纪录。 ...exact属性要求路径完全匹配才会附加class和style。 Redirect组件当这个组件被渲染时，location会被重写为Redirect的to制定到新location。

2.4K2 0

react-router 入门笔记

，为子组件配置参数 children: 构建自定义链接标签, path: 路由匹配地址 exac: 是否精确匹配 stric: 使用严格模式多路径匹配时，只渲染就近配置路径下的组件..., 且优先匹配当前路由环境下的组件, 例如：父组件路径: '/home' 子组件下有 , 实际路径为： '/home/sub' 所以在划分路径时，需要注意路径嵌套的问题...，都配置了路径 '/books', ** 当触发 Link 跳转时，将显示自组件内的组件，即显示: '路由嵌套，path=/sub' ** 看起来一切正常，但当我们刷新页面，将进入主路由的 Books...props参数时使用，如果我们在component 中传入匿名函数包裹的组件，该组件将被反复调用，应该creatELement函数无法对匿名函数做比较。...参考: React router的Route中component和render属性的使用 children 无论路径是否匹配都将被渲染，不同的是, 对于已匹配的路径，children 组件内将获取到

1.6K2 0

React Router v4 完全指北

- 来自React 培训文档每个router组件创建了一个history对象，用来记录当前路径( history.location)，上一步路径也存储在堆栈中。...理想来说，应该有一个叫 path的prop，当路径名跟当前路径匹配才会渲染。另一方面，用来跳转页面。可以类比HTML的锚元素。...应该给 path='/'的路由传递 exact={true}props： `` 若只想要路由在路径完全相同时渲染...当URL匹配时，router会将传递的组件使用 React.createElement来生成一个React元素。 render. 适合行内渲染。...有组件的话，只有第一个匹配路径的子会渲染。 Demo 2: 嵌套路由之前，我们给 /, /category and /products创建了路由。

2.8K2 0

无废话快速上手React路由

要点总结： Route组件必须在Router组件内部 Link组件的to属性的值为点击后跳转的路径 Route组建的path属性是与Link标签的to属性匹配的; component属性表示Route组件匹配成功后渲染的组件对象...例如 go(-3) 相当于调用了三次 goBack 方法当参数为 0 时，表示刷新当前页面普通组件使用路由这里区分两个概念，分别为普通组件和路由组件通过 Route 组件渲染的组件为路由组件...这个路由组件 */} {/* 路由匹配规则为/home，没有设置exact属性，当前为模糊匹配 *.../} {/* 路由匹配规则为/about，设置了exact属性，当前为精准匹配 */}...，即 /about/abc 不等于 /about，所以 About 组件也没有渲染总结：如果想要精准匹配的话，只需要将 Route 组件的 exact 属性设置为 true 即可精准匹配要谨慎使用

1.7K2 0

React路由

前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是 URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件（配对）..."/first">页面一页面二使用Route指定路由规则 // 在哪里写的Route,最终匹配到的组件就会渲染到这 <Route path...如果没有指定 path，那么一定会被渲染 exact 的说明， exact 表示精确匹配某个路径一般来说，如果路径配置了 /，都需要配置 exact 属性 Switch与404 通常，我们会把...> <Route path...可以匹配 /users/1 /users/2 /users/xxx 在组件中，通过props可以接收到路由的参数

1.9K2 0

import {BrowseRouter,Routes,Route} from react-router-dom 里面的BrowseRouter是什么？

在React Router库中，BrowserRouter是一种用于在React应用程序中实现路由功能的组件。它是React Router提供的一种路由器组件之一。...BrowserRouter组件使用HTML5的History API来管理URL，并将URL与React组件进行映射，以便在不同的URL路径下呈现不同的组件。...它是React Router库中最常用的路由器组件之一。使用BrowserRouter时，你可以在应用程序的根级别将其作为包装组件。它会基于当前URL路径匹配与之关联的路径，并渲染相应的组件。...以下是一个示例，展示了如何在React应用程序中使用BrowserRouter组件和其他相关组件： import React from 'react'; import { BrowserRouter,...exact path="/" component={Home} />

1742 0

React 入门学习（十一）-- React 路由传参

Switch 解决相同路径问题首先我们看一段这样的代码这是两个路由组件，在2，3行中，我们同时使用了相同的路径 /about...path="/about" component={About}> 在使用 Switch 时，我们需要先从 react-router-dom 中暴露出 Switch...解决二级路由样式丢失的问题当我们将路径改写成 path="/ljc/about" 这样的形式时，我们会发现当我们强制刷新页面的时候，页面的 CSS 样式消失了。...，就我们的第一种匹配就不会成功，因为精准匹配需要的是完全一样的值，开启精准匹配采用的是 exact 来实现 <Route exact={true} path="/home" component={Home

6153 0

React 入门学习（十一）-- React 路由传参

Switch 解决相同路径问题首先我们看一段这样的代码这是两个路由组件，在2，3行中，我们同时使用了相同的路径 /about...path="/about" component={About}> 在使用 Switch 时，我们需要先从 react-router-dom 中暴露出 Switch...解决二级路由样式丢失的问题当我们将路径改写成 path="/ljc/about" 这样的形式时，我们会发现当我们强制刷新页面的时候，页面的 CSS 样式消失了。...，就我们的第一种匹配就不会成功，因为精准匹配需要的是完全一样的值，开启精准匹配采用的是 exact 来实现 <Route exact={true} path="/home" component={Home

6331 0

React面试八股文（第一期）

path="/login" component={Login}>Route 组件的 path 属性用于匹配路径，因为需要匹配 / 到 Home，匹配 /login 到 Login，所以需要两个...这样写的话，当 URL 的 path 为 “/login” 时，和都会被匹配，因此页面会展示 Home 和 Login...这是就用到了exact属性，它的作用就是精确匹配路径，经常与联合使用。...只有当 URL 和该的 path 属性完全一致的情况下才能匹配上：import { Switch, Route} from 'react-router-dom' </Route

3K3 0

从零手写react-router

// 我们知道location.pathname是正儿八经的浏览器地址, 而我们书写在Route组件上的是path规则 // 所以我们要匹配只能使用我们之前封装好的pathMatch函数...当你遇到了Redirect组件, 你通过location上// 的replace方法将他去渲染指定的路径就行了import React from "react";import routerContext...id这样的路径, 则渲染News组件那么react-router他是怎么去判断浏览器地址栏的路径和这个Route组件中的path属性匹配上的？...// 我们知道location.pathname是正儿八经的浏览器地址, 而我们书写在Route组件上的是path规则 // 所以我们要匹配只能使用我们之前封装好的pathMatch函数...当你遇到了Redirect组件, 你通过location上// 的replace方法将他去渲染指定的路径就行了import React from "react";import routerContext

3.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭