开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当"exact“未打开时，为什么react-router不能拾取不完全匹配的路由？

当"exact"未打开时，react-router不能拾取不完全匹配的路由是因为react-router在匹配路由时，默认使用的是模糊匹配（partial match）的方式。模糊匹配是指当URL路径的一部分与路由配置中的路径匹配时，就会被认为是匹配成功。

然而，当"exact"未打开时，react-router会继续向下匹配其他路由，直到找到第一个匹配成功的路由为止。这意味着如果存在多个路由路径部分匹配的情况，react-router会选择第一个匹配成功的路由进行渲染，而不会继续匹配其他可能的路由。

这种行为的优势在于可以实现路由的嵌套和层级管理，同时也可以提高路由匹配的效率。例如，当我们有一个路由配置为"/users"，另一个路由配置为"/users/:id"，当访问"/users/123"时，如果"exact"未打开，react-router会优先匹配到"/users"路由，而不会继续匹配"/users/:id"路由。

这种模糊匹配的应用场景包括但不限于以下情况：

实现路由的嵌套和层级管理
提高路由匹配的效率

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

腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。产品介绍链接
腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。产品介绍链接
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
腾讯云人工智能：提供丰富的人工智能服务和解决方案，包括图像识别、语音识别、自然语言处理等。产品介绍链接
腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网应用。产品介绍链接
腾讯云移动推送（TPNS）：提供高效、稳定的移动消息推送服务，支持多种推送方式和场景。产品介绍链接

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

有帮助

没帮助

相关·内容

React Router 邦邦两拳🥊 🥊

有了组件的概念，根据路由匹配到相应的组件，并展示。.../>} /> // 新版本 6.v 和渲染时会搜索其子元素,然后根据子元素的路径找到匹配的组件。...找到后，它会渲染该并忽略所有其他路由。如果没有匹配到，则和不渲染任何内容。 exact ,path匹配的是开头，而不是整个。...比如/index和/index/add，当找匹配到 /index之后就不会向下去匹配了。而加了exact后就会精准匹配。...，当其prop与当前位置匹配时，可以将其自身设置为“active” Redirect 从现在的位置跳到另一个位置 {/*

3.4K2 0

react-router 的使用与优化

window.location.replace("/") 表示重定向到某个页面，重定向相当于代替之前的路由，之前的那个路由不能后退回来。...Route 中的 exact 属性表示只有 path 完全匹配时才渲染对应的组件，上面例子中，如果没有 Switch 组件和 exact 属性时，当访问 /123 路由页时，/ 路由也会匹配到，因为 /...使用 Switch 时，被 Switch 包裹的 Route 就只能匹配到一个，当上面的路由匹配到后，Switch 下面的组件就会不再匹配了。...比如如果把 exact 属性都去除，这时访问 /123 页面时，渲染的却只有 Home 组件，这是因为 Home 组件的路由是 /，而 /123 包含它，Switch 从上往下匹配，第一个符合条件，下面的路由就不再匹配...当点击 Link 包裹的文字后，就会使用该路径，并将路径匹配到的组件加载到页面上。

3.2K1 0

React 16 - 生态：React Router

React Router 为什么要用路由？...( ) : ( ) }} /> : 路由配置的核心标记，路径匹配时显示对应组件...component={About} /> : 只显示第一个匹配的路由...import { Switch, Route } from 'react-router'; ...每个 React 组件都可以是路由容器 React Router 的声明式语法可以方便的定义嵌套路由

6682 0

从零手写react-router

将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...方法, 都会根据参数返回给我们一个react-router中的match对象，参考前端手写面试题详细解答history库的使用我们知道, 当路由匹配组件以后, react-router会向组件内部注入一些属性...; // 依旧给他来null就好了}其实我们这里我们跟react-router还有一点区别, 当他的Route组件path没有的时候, 他也会直接渲染所匹配的组件, 我这里没有写, 为什么呢, 因为我觉得他这样不合逻辑...方法, 都会根据参数返回给我们一个react-router中的match对象，参考前端手写面试题详细解答history库的使用我们知道, 当路由匹配组件以后, react-router会向组件内部注入一些属性...; // 依旧给他来null就好了}其实我们这里我们跟react-router还有一点区别, 当他的Route组件path没有的时候, 他也会直接渲染所匹配的组件, 我这里没有写, 为什么呢, 因为我觉得他这样不合逻辑

3.1K3 0

react-router4

一、关于react-router react-router是一些封装好的组件用于前端路由，当我们点击的时候会出现一个虚拟的路由，并不会做页面的全刷新，实现不同组件之间的切换和跳转。...知道如何去监听浏览器地址栏的变化，并解析这个 URL 转化为 location 对象，然后 router 使用它匹配到路由，最后正确地渲染对应的组件。）...Route有path，component和exact属性，path为跳转路由路径，component为跳转的组件。...Route不是全匹配，所以当我们进行路由判断的时候，比如一个路径为"/"，一个为“/news”这样我们进行跳转“/news”时任然会匹配到“/”，所以这时我们需要使用exact加在有"/"路径的Route...上，加上以后路由绝对相等才会去匹配 <Route path

1.5K3 0

从零手写react-router

$/i）, 然后将地址栏的path值取出来跟该正则表达式进行匹配, 匹配上了就要渲染相应的路由, 匹配不上就渲染其他的逻辑path-to-regexp就是做这个事情的, 他把我们给他的路径字符串转换为正则表达式...// path: 就是我们要匹配的路径规则// keys: 如果你传递了, 当他匹配上以后, 会把相对应的参数key传递到keys数组中// options: 给path路径规则的一些附加规则, 比如sensitive...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...方法, 都会根据参数返回给我们一个react-router中的match对象，参考前端手写面试题详细解答history库的使用我们知道, 当路由匹配组件以后, react-router会向组件内部注入一些属性...; // 依旧给他来null就好了}其实我们这里我们跟react-router还有一点区别, 当他的Route组件path没有的时候, 他也会直接渲染所匹配的组件, 我这里没有写, 为什么呢, 因为我觉得他这样不合逻辑

1.4K4 0

从零手写react-router

$/i）, 然后将地址栏的path值取出来跟该正则表达式进行匹配, 匹配上了就要渲染相应的路由, 匹配不上就渲染其他的逻辑path-to-regexp就是做这个事情的, 他把我们给他的路径字符串转换为正则表达式...// path: 就是我们要匹配的路径规则// keys: 如果你传递了, 当他匹配上以后, 会把相对应的参数key传递到keys数组中// options: 给path路径规则的一些附加规则, 比如sensitive...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end..., 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，history库的使用我们知道, 当路由匹配组件以后, react-router会向组件内部注入一些属性...; // 依旧给他来null就好了}其实我们这里我们跟react-router还有一点区别, 当他的Route组件path没有的时候, 他也会直接渲染所匹配的组件, 我这里没有写, 为什么呢, 因为我觉得他这样不合逻辑

1.4K5 0

使用React-Router实现前端路由鉴权

React-Router是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是React-Router。...然后我们就可以在App.js里面引入React-Router做路由跳转了，注意我们在浏览器上使用的是react-router-dom，新版的React-Router将核心逻辑层和展示层分开了，核心逻辑会处理路由匹配等...当然最直观最简单的方法就是每个页面都检测下当前用户的角色，匹配不上就报错或者跳回首页。...adminRoutes; 然后就可以写我们的高级组件了，我们将它命名为AuthRoute吧，注意我们这里假设的用户登录时后端API会返回给我们当前用户的角色，一个用户可能有多个角色，比如普通用户的角色是...本文内容偏简单，作为熟悉React-Router的用法还不错，但是我们不能只会用，还要知道他的原理。

2.3K4 1

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

方便react销毁组件、重新渲染的时候去清空refs的东西，防止内存泄露如何配置 React-Router 实现路由切换（1）使用组件路由匹配是通过比较的 path 属性和当前地址的...当一个匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的将始终被匹配。...Home // Home是一种特殊类型的当它的 to属性与当前地址匹配时，可以将其定义为"活跃的"。...这样写的话，当 URL 的 path 为 “/login” 时，和都会被匹配，因此页面会展示 Home 和 Login...这是就用到了exact属性，它的作用就是精确匹配路径，经常与联合使用。

2.7K2 0

从零手写react-router_2023-03-01

$/i）, 然后将地址栏的path值取出来跟该正则表达式进行匹配, 匹配上了就要渲染相应的路由, 匹配不上就渲染其他的逻辑 path-to-regexp就是做这个事情的, 他把我们给他的路径字符串转换为正则表达式...// path: 就是我们要匹配的路径规则 // keys: 如果你传递了, 当他匹配上以后, 会把相对应的参数key传递到keys数组中 // options: 给path路径规则的一些附加规则, 比如...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象， history库的使用我们知道, 当路由匹配组件以后, react-router会向组件内部注入一些属性...null; // 依旧给他来null就好了 } 其实我们这里我们跟react-router还有一点区别, 当他的Route组件path没有的时候, 他也会直接渲染所匹配的组件, 我这里没有写, 为什么呢

1.3K3 0

手写react-router

$/i）, 然后将地址栏的path值取出来跟该正则表达式进行匹配, 匹配上了就要渲染相应的路由, 匹配不上就渲染其他的逻辑path-to-regexp就是做这个事情的, 他把我们给他的路径字符串转换为正则表达式...// path: 就是我们要匹配的路径规则// keys: 如果你传递了, 当他匹配上以后, 会把相对应的参数key传递到keys数组中// options: 给path路径规则的一些附加规则, 比如sensitive...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end..., 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，history库的使用我们知道, 当路由匹配组件以后, react-router会向组件内部注入一些属性...; // 依旧给他来null就好了}其实我们这里我们跟react-router还有一点区别, 当他的Route组件path没有的时候, 他也会直接渲染所匹配的组件, 我这里没有写, 为什么呢, 因为我觉得他这样不合逻辑

1.3K4 0

「源码解析」这一次彻底弄懂react-router路由原理

写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？...2 react-router初探，揭露路由原理面纱 ①react-router-dom和react-router和history库三者什么关系 history 可以理解为react-router的核心，...如果存在多个Router会造成，会造成切换路由，页面不更新的情况。 2 Switch-匹配正确的唯一的路由根据router更新流，来渲染当前组件。...使得我们可以在页面组件中的props中获取location ,match等信息。 4 Redirect-没有符合的路由，那么重定向重定向组件，如果来路由匹配上，会重定向对应的路由。...react-router提供路由渲染组件，路由唯一性匹配组件，重定向组件等功能组件。流程分析当地址栏改变url，组件的更新渲染都经历了什么？??? 拿history模式做参考。

3.8K4 0

React第三方组件1(路由管理之Router的使用①简单使用)

1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23...3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24 4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25 5、React...react-router，首先放出它的官网地址： https://reacttraining.com/react-router/web/guides/philosophy 我们废话不多，直接进入示列！...先来看下我们之前的文件 ? 大家可能会奇怪为什么每个Index.jsx文件,都这么写，其实你可以不这么写，我只是为了预留给将来用react-router使用！...exact ：精确匹配如果你的组件需要传值，就得返回这个组件： }/> 不需要传值的就直接这样写

1.7K3 0

React Router3到5 升级小记

导入的包变了 //V3 下 npm i react-router //V5 下 npm i react-router-dom react-router为核心库，运行于浏览器端就用react-router-dom...组件渲染方式2 增加了render属性,v3中不存在这个属性,render 表示在path匹配时被调用的方法，而不是创建一个组件,但是需要一个返回值，返回一个组件或者null。...，路径不匹配时 URL的match 值为 null，可以用来根据路由是否匹配动态调整UI。...Switch 组件的坑 Switch 用来渲染和 path 相匹配的第一个路由,当匹配到一个路由后就不会继续往后匹配，反之则会渲染和 path匹配的所有路由。...这个时候就需要使用exact属性了，表示是否精确匹配，让路由的匹配更严谨。

2.2K2 0

React 中的一些 Router 必备知识点

在处理 URL 时，除了问号带参数的方式，React-Router 能帮我们做什么呢？在这其中，Route 组件的 path 属性便可用于指定路由的匹配规则。...URL 上，此时，当参数名字（本 Case 中是 id）对应的值改变时，将被认为是不同 URL。...上面代码中，用户访问 /router/book 时，不会触发第二个路由规则（不会展示“图书”），因为它会匹配 /router/:type 这个规则。因此，带参数的路径一般要写在路由规则的底部。...但这种情况下 React-Router 是不能识别的，于是我们写了一个 Plugin 放在 Webpack 中，目的是将各个文件夹下的路由汇总，并生成 router-config.js 文件。...Case 3: 在实际项目中，其实我们也会去考虑用户未授权时路由跳转、页面 404 时路由跳转等不同情况，以下 Case 和代码仅供读者参考～ { getRoutes(match.path

2.8K4 0

React Router 进阶技巧

本文介绍在工程中经常用到的 react-router 的技巧： ?️ 如何在 TypeScript 中使用？ ?️exact和strict的区别？ ?️ 如何封装路由配置组件？ ?️...有时候会需要使用编程式导航，比如上方导航栏里面选项，响应按钮事件，进行路由跳转。react 的做法是通过高阶函数，函数体内部向组件的 props 注册一些路由的方法，最后返回一个新的组件。...为了方便说明，假设路由为/a：若将exact设置为 true，路由相同（包括有斜杠）即可匹配。路由/a可以和/a/、/a匹配。若将strict设置为 true，路由相同（不包括斜杠）可匹配。...路由/a可以和/a匹配，不能和/a/匹配。两者相比，strict匹配更严格。但一般常将exact设置为 true。如何封装路由配置组件？...但是在 React 中，react-router 并不提供相关的钩子函数。那么如果有顶部导航栏，不同页面切换时，高亮不同的标签，那么应该怎么实现响应路由变化呢？

2.5K2 0

React 进阶 - React Router

整个 React-Router 的核心，里面包括两种路由模式下改变路由的方法，和监听路由变化方法等 React-Router 有了 History 路由监听 / 改变的核心，那么需要调度组件负责派发这些路由的更新...window.addEventListener("hashchange", function (e) { console.log(e.newURL) }) 当 hash 值改变时，就会触发 hashchange...是通过 context 上下文方式传递的路由信息 context 改变，会使消费 context 组件更新，触发路由改变时，重新渲染匹配组件 props.history 是通过 BrowserRouter...：可以将 childen 作为渲染函数执行，可以传递路由信息，也可以传递父组件信息 exact Route 可以加上 exact ，来进行精确匹配，精确匹配原则，pathname 必须和 Route...Route 进行渲染通过 Switch 包裹后，那么页面上只会展示一个正确匹配的路由 Redirect Redirect 可以在路由不匹配情况下跳转指定某一路由，适合路由不匹配或权限路由的情况注意

1.8K2 0

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

你将看到以下主题：常规路由 为什么需要 React 路由？...对于每个新URL，用户会被重定向到新的 HTML 页面。你可以通过参考下图来更好地理解路由的工作原理。 ? React Router 为什么需要 React 路由？...每当用户输入新的 URL 请求时，路由不会从服务器获取数据，而是为每个新的 URL 请求交换不同的 Component。...这是 React Router v4 声明性质的一个的例子。 v4 中的路由为 inclusive 意味着可以同时呈现多个路由。我们使用 exact 属性来解决多匹配中的问题。...但是我们希望 '/' 仅匹配我们的渲染函数，因此使用 exact 明确地实现了这一点。 4. 路由只能有一个单一子元素：这就是我们需要在中包装路由的原因。

2K2 0

React 中的一些 Router 必备知识点

在处理 URL 时，除了问号带参数的方式，React-Router 能帮我们做什么呢？在这其中，Route 组件的 path 属性便可用于指定路由的匹配规则。...URL 上，此时，当参数名字（本 Case 中是 id）对应的值改变时，将被认为是不同 URL。...上面代码中，用户访问 /router/book 时，不会触发第二个路由规则（不会展示“图书”），因为它会匹配 /router/:type 这个规则。因此，带参数的路径一般要写在路由规则的底部。...但这种情况下 React-Router 是不能识别的，于是我们写了一个 Plugin 放在 Webpack 中，目的是将各个文件夹下的路由汇总，并生成 router-config.js 文件。...Case 3: 在实际项目中，其实我们也会去考虑用户未授权时路由跳转、页面 404 时路由跳转等不同情况，以下 Case 和代码仅供读者参考～ { getRoutes(match.path

2.6K2 0

【React】377- 实现 React 中的状态自动保存

，因为某些原因需要临时离开交互场景，则需要对状态进行保存在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中，当用户从详情页退回列表页时...，我们需要研究如何自动保存状态通过路由实现自动状态保存（通常使用 react-router）既然 React 中状态的丢失是由于路由切换时卸载了组件引起的，那可以尝试从路由机制上去入手，改变路由对组件的渲染行为...react-router 版本的兼容替换路由库为 react-keeper[5] 完全替换掉路由方案是一个风险较大的事情，需要较为慎重地考虑3....都无法避免路由在不匹配时被卸载掉的命运但将 children 属性当作方法来使用，我们就有手动控制渲染的行为的可能，关键代码在此处 https://github.com/ReactTraining/react-router...，在需要处理的数据量较少时，使用手动状态缓存就可以解决大多数问题，但当情况复杂时，还需要尝试将缓存功能单独拎出来解决，以便在业务开发过程中更好地进行关注点分离目前的实现都有各自的问题，但其探究过程十分有趣

2.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭