React 路由器匹配失败

2024-04-21

使用有什么好处Match and Miss组件来自react-router over Router成分?我似乎找不到任何关于此的文档反应路由器文档 https://github.com/ReactTraining/react-router/tree/master/docs.

我的问题源于查看普遍反应 https://github.com/ctrlplusb/react-universally更准确地说,请查看此处的样板:https://github.com/ctrlplusb/react-universally https://github.com/ctrlplusb/react-universally


<Match> and <Miss>是 React Router v4 的 alpha 版本中的组件。

在测试版中,<Match>已更名<Route>(并且它的 props 已经改变,所以pattern is now path and exactly is exact). The <Miss>组件被完全删除。相反,你应该使用<Switch>语句,它只会渲染第一个<Route> (or <Redirect>)即匹配。您可以添加一个无路径组件作为该组件的最后一个子组件<Switch>的路线,当前面没有一个时它将渲染<Route>s match.

您可以查看API文档 https://reacttraining.com/react-router/api更多细节。

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/about' component={About} />
  // The following <Route> has no path, so it will always
  // match. This means that <NoMatch> will render when none
  // of the other <Route>s match the current location.
  <Route component={NoMatch} />
</Switch>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 路由器匹配失败 的相关文章

  • 在电子生成器反应电子应用程序后,在 Windows 中出现空白屏幕

    在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 这是package json 在电子生成器反应电子应用程序后 Windows 中出现空白屏幕 name SmallBusinessManagement version 0 1
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • AWS JS SDK TypeError:STS 不是构造函数

    我有一个 ReactJS 应用程序 它使用 aws sdk 进行认知登录 我用了yarn安装所有模块 但是当我尝试访问 localhost 的网站时 出现 JS 错误 未捕获 承诺中 类型错误 STS 不是构造函数 错误指向该行aws sd
  • useEffect 中的 setTimeout 函数输出缓存的状态值

    这很简单 我正在使用 Redux 来管理我的状态 我有一个setTimeout函数在一个useEffect功能 The setTimeout超时值为50000ms 我想要 SetTimeout 处理程序做什么 After 50000ms t
  • 由于 CORS 错误,POST 请求在 React axios 中被阻止[重复]

    这个问题在这里已经有答案了 我正在尝试向包含多部分数据的 API 发送 POST 请求 我在 postman 中测试了 API 一切正常 但是当我在react中调用API时 它给了我CORS错误 我交叉检查了 URL 标头和数据 对我来说一
  • React this.state 未定义?

    我正在遵循 Pluralsight 的初学者教程 在表单提交时将值传递给addUser组件方法 我需要将 userName 推送到this state users但我收到错误 App jsx 14 Uncaught TypeError Ca
  • React 组件等待所需的 props 渲染

    我正在父组件内部声明一个组件 我想在一个文件中建立特定的道具 然后在父组件中 我希望能够同时为子组件建立其他道具 因为它们是共享属性 在大多数情况下 我的问题是 子组件尝试渲染并失败 因为首先没有建立所需的道具类型 有没有办法告诉子组件等待
  • 在社交媒体上分享 Reactjs 链接时,react-helmet 中的元标记不显示

    我有一个在客户端运行reactjs的项目 在后端运行nodejs express 我实现了react helmet来更新索引之外的路线的标题和元标记 例如 用户查看帖子 viewpost q POSTID 然后客户做了一个GET reque
  • ReactJS 水平对齐material-ui 元素

    我试图在文本输入旁边有一个单选按钮 这样用户基本上可以输入问题的 答案 并标记一个首选答案 然而 Material UI 将每个都放在自己的行上 这就是我目前所拥有的 div div
  • 有没有办法在 Next.js 的 getStaticProps 中使用 redux 工具包?

    我使用时获取数据useEffect代替getStaticProps 但在getStaticProps它表明钩子只能在功能组件中使用 import Head from next head import Image from next imag
  • MUI DatePicker + date-fns 本地化问题

    当我使用MUI时出现这个问题日期选择器 with 本地化提供商 and 适配器日期Fns with 匈牙利 local
  • 如何使用 React 获取查询字符串?

    我试图从网址获取 query 123 http localhost 3000 query 123 http localhost 3000 query 123 Tried App js const search this props loca
  • 下一张图片不采用类属性

    我正在使用 Next js 和next image显示图像 但 CSS 在其中不起作用 该图像是 SVG 格式 我已将其放在公共文件夹中 我正在使用 Tailwind CSS 与此一起使用
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 使用 React 渲染来自 Express 的 Flash 消息

    我已经搜索了很多 但一直无法找到一种简单的方法来从 Express 获取 Flash 消息并在 React 中渲染它们 我需要访问 Express 服务器上的数据 但是存储这些数据并将其传递给 React 的最佳方式是什么 我正在考虑传递一
  • css-loader 不导入 .css 文件返回空对象

    从 css 文件导入样式 返回空对象 看来 css loader 无法正常工作 谁可以帮我这个事 请找到下面的参考文件 index js import React from react import style from header cs
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 在 React 中将模板分离到外部文件

    我正在为客户开发 ReactJS 应用程序 我希望客户端能够自定义应用程序中的一些配置和模板 所以我创建了一个config js file window APP CONFIG url example com template item di
  • 如何映射轮播的子项数组?

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样

随机推荐

  • 如何根据百分比更改imageview中的图像颜色并将颜色填充到该百分比

    如何根据百分比填充图像TextView 它应该根据百分比变化TextView 在下面的代码中 高度布局正在改变 但我希望图像的颜色应该根据百分比 textview 电池 的值 改变 CODE private void displayData
  • 如何将 NSTimer 与这个简单的 while 循环一起使用?

    我有一个正在执行的 void 方法 在某一时刻它会进入一个 while 循环 该循环在请求时直接从加速度计获取值 我浏览了有关 NSTimer 类的文档 但我无法理解在我的情况下如何准确地使用这个对象 e g void play if ac
  • 使用代码将 X509 证书添加到存储区

    此代码会将 x509 cer 证书文件添加到证书存储中 使用System Security Cryptography X509Certificates var filename Cert cer var cert new X509Certi
  • Selenium 服务器错误:无法获取浏览器

    我在 Windows 7 上运行 Selenium Standalone Server 2 25 并使用 Internet Explorer 9 作为浏览器 对于每个需要打开浏览器的测试 我都会收到此错误 Selenium WebDrive
  • 在复合组件的属性中使用EL

    我的 JSF 自定义组件代码
  • 在 Jest .toMatchObject 中包含 toBeCloseTo

    我正在测试一个对象是否与一组字段匹配 但其中一个是浮点 我需要使用 toBeClearTo https jestjs io docs en next expect tobeclosetonumber numdigits 怎么可能在一段时间之
  • r 中不包括 NA 的列长度

    假设我有一个data frame如下 a b c 1 5 NA 6 2 NA NA 7 3 6 5 8 我想找到每列的长度 不包括 NA 答案应该是这样的 a b c 2 1 3 到目前为止 我已经尝试过 is na Gives TRUE
  • Excel公式从日期中减去天数

    Excel中有没有办法让公式执行如下操作 12 20 2010 180 这需要特定日期 本例中为 12 20 2010 并减去 180 天 假设原始日期位于单元格 A1 中 DATE YEAR A1 MONTH A1 DAY A1 180
  • 为什么 jquery 脚本不工作?

    为什么 jQuery 脚本可以在我的 jsfiddle 中运行 但不能在我的页面中运行 我所做的 尝试了不同版本的 JQuery 制作了脚本 所以我有这个测试页面 头部部分
  • 如何使用 Xcode 5 本地化我的应用程序?

    这是关于的后续问题 和答案 如何使用 Xcode 4 本地化我的应用程序 https stackoverflow com questions 5349066 how to localize my app with xcode 4 11282
  • Angular 2:实现自定义上下文菜单

    我正在实现 Angular 2 属性指令 以允许我向元素添加自定义上下文菜单 如下所示 p Hello world p 该指令添加了一个鼠标事件处理程序来捕获右键单击 其想法是构建一个上下文菜单 将其添加到 DOM 然后在用户完成操作时销毁
  • Clojure gen-class 返回自己的类

    我现在正在使用 Clojure 创建一个类对象 它有一个返回对象本身的方法 用Java编写的 我想要制作的对象是这样的 class Point public double x public double y public Point dou
  • 静态与非静态方法

    假设您有一些可以在非静态类中设为静态的方法 例如 private double power double a double b return Math Pow a b 您认为将方法签名更改为静态有什么好处吗 在上面的例子中 private
  • docker-compose 相当于 docker run --init 吗?

    根据https github com krallin tini using tini https github com krallin tini using tini tini内置于docker中 可以通过传递 init标记为docker
  • docker 容器中 PostgreSQL 的权限问题

    我正在尝试使用 PostgreSQL 运行一个 docker 映像 该映像配置了一个用于持久数据的卷 docker compose yml version 3 1 services db image postgres restart alw
  • 启动 StepFunction 并退出不会触发执行

    我有 Lambda 函数tranportKickoff它接收输入 然后将输入发送 代理到阶跃函数 下面的代码does运行 我没有收到任何错误 但同时步骤函数没有执行 对于设计也很重要 我不希望transportKickoff函数等待步骤函数
  • Mongoose Population: CastError: 路径“_id”处的值“[object Object]”转换为 ObjectId 失败

    遇到一个CastError在 Mongoose 中填充嵌套 ObjectId 引用时 值 显然是valid 只要它们在保存到架构时不会被阻止 有兴趣在服务器端解决此问题以防止将来出现格式错误的数据 但是 我知道不从客户端保存这些值是一个好主
  • java 是否存在只有键没有值的哈希结构?

    我正在寻找一种无需值即可对键进行哈希处理的结构 查询时 如果找到密钥 则应返回 true 否则返回 false 我正在寻找类似的东西Hashtable
  • 获取符合条件的组合

    问题 我有一个表 我需要在其中提取行 或列 如果我转置表 的所有有效组合 列中只有值 或 并且当组合中的至少一行中有 时 组合被认为是有效的 也就是说 所有行中带有 的任何组合都是无效的 示例表 Guns P 01 P 02 P 03 P
  • React 路由器匹配失败

    使用有什么好处Match and Miss组件来自react router over Router成分 我似乎找不到任何关于此的文档反应路由器文档 https github com ReactTraining react router tr