为什么React Router中的"exact“关键字给我一个空白页？

React Router是React.js中用于实现路由功能的一个库。在React Router中，"exact"关键字用于精确匹配路由路径，只有当路径完全匹配时才渲染对应的组件。

当"exact"关键字导致一个空白页时，可能是因为以下几个原因：

路由路径未配置正确：确保使用了正确的路径进行配置。路径需要与浏览器地址栏中的路径完全匹配。
路由路径有重叠：如果有多个路由路径的前缀部分相同，且同时使用了"exact"关键字，可能会导致路径匹配冲突。请检查路由配置中是否存在这种情况。
路由组件渲染问题：可能是路由组件未正确渲染导致页面显示空白。请确保路由组件的渲染逻辑正确，没有遗漏任何必要的代码。

综上所述，出现空白页的问题可能是由于路由路径配置错误、路径冲突或路由组件渲染问题所致。建议逐一检查和排除以上可能性，以确保"exact"关键字能够正常工作。

如果你对React Router的使用还有其他疑问，可以参考腾讯云的相关产品React Native: React Router官方文档。

相关·内容

React的魅力: React-Router-集中式管理和Redux-核心概念

路由统一管理(路由集中管理)现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。...然后在创建一个 router 目录在该目录当中创建一个 index.js 当然你也可以不用像我这样，你也可以在某一处地方创建一个 JS 文件在该文件当中编写对应的路由映射配置文件内容即可，index.js...renderRoutes(routers[4].routes) 的写法是 2B 铅笔写法, 企业开发中千万不要这么写，如果当前组件是通过 renderRoutes 创建的, 那么系统过就会自动给这个组件传递一个...)}什么是 ReduxRedux 是一个管理状态（数据）的容器，提供了可预测的状态管理什么是可预测的状态管理数据, 在什么时候，因为什么，发生了什么改变，都是可以控制和追踪的，我们就称之为预测的状态管理为什么要使用...（父子、共享等），一个状态的变化会引起另一个状态的变化所以当应用程序复杂的时候，状态在什么时候改变，因为什么改变，发生了什么改变，就会变得非常难以控制和追踪所以当应用程序复杂的时候，我们想很好的管理、维护

2970 0

从零手写react-router

将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...pathMatch;至此, 我们的pathMacth模块就生成了, 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，参考前端手写面试题详细解答..., 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学（比如他为什么要这样做, 如果是你你会怎么做）, 他不一定是对的...pathMatch;至此, 我们的pathMacth模块就生成了, 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，参考前端手写面试题详细解答..., 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学（比如他为什么要这样做, 如果是你你会怎么做）, 他不一定是对的

3.1K3 0

从零手写react-router

react-router中那个的match对象我们会发现这个功能其实是独立的, 这样拆分出来他可以用在任何地方, 只要匹配我就生成一个对象, 我也不管你拿这个对象去干嘛不关我屁事, 这也是软件开发中的一种较好的开发方式..., 大家可以停下来在这里仔细思考一下这样的好处所以接下来我要做的事情非常简单, 就是封装一个跟处理路径相关的方法, 为后续我们开发其他router功能的时候提供基层支持我们在react工程中自己建立一个...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...pathMatch;至此, 我们的pathMacth模块就生成了, 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，参考前端手写面试题详细解答..., 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学（比如他为什么要这样做, 如果是你你会怎么做）, 他不一定是对的

1.4K4 0

从零手写react-router

react-router中那个的match对象我们会发现这个功能其实是独立的, 这样拆分出来他可以用在任何地方, 只要匹配我就生成一个对象, 我也不管你拿这个对象去干嘛不关我屁事, 这也是软件开发中的一种较好的开发方式..., 大家可以停下来在这里仔细思考一下这样的好处所以接下来我要做的事情非常简单, 就是封装一个跟处理路径相关的方法, 为后续我们开发其他router功能的时候提供基层支持我们在react工程中自己建立一个...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...pathMatch;参考前端进阶面试题详细解答至此, 我们的pathMacth模块就生成了, 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，..., 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学（比如他为什么要这样做, 如果是你你会怎么做）, 他不一定是对的

1.5K5 0

从零手写react-router_2023-03-01

我们在react工程中自己建立一个react-router目录, 在其中新建一个文件pathMatch.js 这也意味着我们将不再从npm上拉react-router, 而是直接在自己的工程里引用自己的...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...export default pathMatch; 至此, 我们的pathMacth模块就生成了, 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象..., 因为我觉得他这样不合逻辑, 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学（比如他为什么要这样做, 如果是你你会怎么做...这个是一个hoc, 他的作用非常简单, 就是将路由上下文作为属性注入到组件中我们在react-router目录下新建一个withRouter.js import React from "react"

1.4K3 0

手写react-router

react-router中那个的match对象我们会发现这个功能其实是独立的, 这样拆分出来他可以用在任何地方, 只要匹配我就生成一个对象, 我也不管你拿这个对象去干嘛不关我屁事, 这也是软件开发中的一种较好的开发方式..., 大家可以停下来在这里仔细思考一下这样的好处所以接下来我要做的事情非常简单, 就是封装一个跟处理路径相关的方法, 为后续我们开发其他router功能的时候提供基层支持我们在react工程中自己建立一个...将匹配结果返回出去 // 首先, 如果你读了这个path-to-regex的文档的话, 你会发现一个问题 // 我们在react-router中传递exact为精确匹配, 而在该库中则是使用end...pathMatch;参考前端进阶面试题详细解答至此, 我们的pathMacth模块就生成了, 每次调用pathMatch方法, 都会根据参数返回给我们一个react-router中的match对象，..., 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学（比如他为什么要这样做, 如果是你你会怎么做）, 他不一定是对的

1.3K4 0

React-Router-集中式管理

前言React Router 是 React 应用程序中常用的路由管理库，用于处理页面导航和路由控制。集中式管理是一种在大型应用程序中更好地组织和管理路由的方法，它有助于维护应用的可扩展性和可维护性。...路由统一管理(路由集中管理)现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。...然后在创建一个 router 目录在该目录当中创建一个 index.js 当然你也可以不用像我这样，你也可以在某一处地方创建一个 JS 文件在该文件当中编写对应的路由映射配置文件内容即可，index.js...，就是把之前的 Route 去除了，利用了 react-router-config 当中的 renderRoutes 方法将我们编写的 routers 进行注册，然后我们的一级路由与对应的组件的关系就关联起来了...renderRoutes(routers[4].routes) 的写法是 2B 铅笔写法, 企业开发中千万不要这么写，如果当前组件是通过 renderRoutes 创建的, 那么系统过就会自动给这个组件传递一个

2634 0

React-Router-手动路由跳转

前言手动路由跳转是React Router中一个重要的概念，它允许您在React应用程序中通过编程方式控制路由导航，而不是依赖于用户的交互操作。...这种能力对于实现复杂的导航逻辑、处理表单提交、或基于某些条件进行路由跳转非常有用。在这篇文章中，我们将深入探讨如何在React应用程序中执行手动路由跳转。...您将学习如何使用React Router提供的useHistory或useNavigate钩子（或者类似的方法，取决于您的React Router版本）来获取路由导航的函数，并如何在组件内部触发路由跳转..., 那么系统就会自动传递一个 history 给我们我们只需要拿到这个 history 对象, 调用这个对象的 push 方法, 通过 push 方法修改资源地址即可更改 App.js 的路由模式为 BrowserRouter...方法, 那么这个方法就会通过路由将传入的组件创建出来，如果一个组件要使用路由创建, 那么这个组件必须包裹在 BrowserRouter, HashRouter 中。

3983 0

react-router-dom 6.x 版本让我🐓 🐝 了

---- 这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」前言 ✋ 先，说一下我为什么发这么一篇文章。一个月前刚用过react的路由插件。当时用了之后也没有什么报错。...所以想写篇文章梳理一下，同时也让能看到这篇文章的们，少百度一些报错。我去npm官网看了下react-router-dom的发布版本，在最近一个月内一直在改动着。遇到的报错 ❌ 1....} export default App; 翻译一下:就是在 react-router-dom 中没有导出。...主要是我没去度过 react-router-dom的语法，都是复制用的。...我把导航写到了外面，同时 Nav 组件中又使用了 react-router-dom 的 Link组件。

5932 0

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

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

2K2 0

React-Router v6

的新特性变更。嵌套路由变得更简单。用useNavigate代替useHistory。新钩子useRoutes代替react-router-config。...比和更简单的匹配规则。路径层次更清晰。...3.1 简化嵌套路由定义 v5中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑且看之前的处理： // v5 import { BrowserRouter, Switch, ...，直接在路由里定义的，然后用接下来的一个新API：Outlet 3.2 新API:Outlet 这玩意儿，像极了{this.props.children}，具体用法看以下例子...Router v6给我们带来方便的同时，还把包减少了一半以上的体积。。。

1.9K1 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使用！...1.首先加入依赖这里我们用到的是 react-router-dom npm i -S react-router-dom 2.引入这个react-router-dom import {HashRouter

1.7K3 0

react学习系列6 react-router 实现异步按需加载模块

如果使用的是react-router，官网文档给出的方案是用webpack的bundle-loader 你可能也见过require.ensure。这是webpack的旧式写法，现在已不推荐。...我倾向于使用import()，这也是webpack推荐的。因为更符合规范。这篇我有专门的介绍，社区中也有专门的方案。...我也用到项目中，代码如下其中City和Login页面是按需加载中的，你可以在network中看到进入这俩页面浏览器会先加载类似 1.chunk.js文件。...import React from 'react' import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom...> ); } } 如果感觉这篇对你有用的朋友给我的项目点个star

1.8K4 0

React 16 - 生态：React Router

React Router 为什么要用路由？.../> : 重定向当前页面，如登录判断 import { Route, Redirect } from 'react-router'; <Route exact path="/" render...import { BrowserRouter as Router, Route } from 'react-router-dom'; : 只显示第一个匹配的路由 import { Switch, Route } from 'react-router'; <Route exact path="...组件都可以是路由容器 React Router 的声明式语法可以方便的定义嵌套路由

6922 0

React Router 邦邦两拳🥊 🥊

---- 这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」简介 React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流...这就是新的一页，而不是只改变中间的部分或者，把中间内容作为一个iframe，去改变iframe的显示（当然现在也有这样做的，大部分微服务都是这么做的，因为多个系统共用一个导航栏） react 而react...React Router 分类 react中的组件主要分为三类：路由器和路由匹配器，和(v6是<Routes...导航 Link Link组件用于取代元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是元素的React 版本，可以接收Router的状态。...它创建一个内存中的history对象，不与浏览器URL互动 const history = createMemoryHistory(location)

3.4K2 0

精读《React Router4.0 进阶概念》

1 引言 React Router4.0 出来之前，许多人都对其夸张的变化感到不适，但其实 4.0 说不定真的是一个非常正确的改动。...也许，说 4.0 不好的人，正是另一个消极版的小红点，希望这篇文章可以让大家意识到，React Router4.0 对大多数人真的很棒！...由于 React Router4.0 中，路由是一种组件，我们可以利用 componentDidUpdate 简单完成滚动条复位的功能： <ScrollToTop...URL 即浏览器地址，在前端数据化统一的浪潮下，其实 URL 也可以被看作是一种参数，在 React 中即一个 props 属性。...总结也许 React Router4.0 带给我们的思考是，放下对网页“页面”的刻板印象，其实网站本没有页面，有的只是状态。

8831 0

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

2K6 0

解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

最近一直在跟着 react 官网和一些国内成熟的视频教程学习一些 react 的技巧和做一些小项目。...这几天碰到一个问题就是使用新版的 react-router-dom 作为路由时会导致所有二级以上页面原地刷新提示错误，类似的错误内容如 Cannot GET /company/zs/000001，如下图所示...：随后 google 搜索关键字 react router Cannot GET /company/zs/000001 找到 stackoverflow 的答案，里面内容介绍到使用 Hash History...或者 Browser History 来解决问题，搜索 hashHistory 发现 hashHistory 在 react-router 4.0.0 版本已经停用，目前项目使用的是 4.0.0 版本...from 'react-router-dom'; ReactDOM.render(( <Route exact path="/

4042 0

解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

最近一直在跟着 react 官网和一些国内成熟的视频教程学习一些 react 的技巧和做一些小项目。...这几天碰到一个问题就是使用新版的 react-router-dom 作为路由时会导致所有二级以上页面原地刷新提示错误，类似的错误内容如 Cannot GET /company/zs/000001，如下图所示...随后 google 搜索关键字 react router Cannot GET /company/zs/000001 找到 stackoverflow 的答案，里面内容介绍到使用 Hash History...或者 Browser History 来解决问题，搜索 hashHistory 发现 hashHistory 在 react-router 4.0.0 版本已经停用，目前项目使用的是 4.0.0 版本...from 'react-router-dom'; ReactDOM.render(( <Route exact path="/

1.5K2 0

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

React是一个用于构建用户界面的JavaScript库。我们还可以借助React Router将其扩展为构建多页应用程序。这是一个第三方库，可在我们的React应用程序中启用路由。...在本教程中，我将介绍使用React Router入门所需的一切。...初始化项目为了能够继续学习，您需要通过在终端中运行以下命令来创建一个新的react应用程序： npx create-react-app react-router-guide 然后，将这些代码行添加到App.js...如您所知，默认情况下，React不带路由。为了在我们的项目中启用它，我们需要添加一个名为react-router的库。...重定向到另一个页面 React Router还有另一个名为Redirect的组件，正如您猜到的，它可以帮助我们将用户重定向到另一个页面。

12K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

为什么React Router中的"exact“关键字给我一个空白页？

相关·内容

React的魅力: React-Router-集中式管理和Redux-核心概念

从零手写react-router

从零手写react-router

从零手写react-router

从零手写react-router_2023-03-01

手写react-router

React-Router-集中式管理

React-Router-手动路由跳转

react-router-dom 6.x 版本让我🐓 🐝 了

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

React-Router v6

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

react学习系列6 react-router 实现异步按需加载模块

React 16 - 生态：React Router

React Router 邦邦两拳🥊 🥊

精读《React Router4.0 进阶概念》

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐