组件在react-router-4中匹配空值

2024-04-11

我正在尝试迁移到使用 React Router 4,但在理解其逻辑时遇到了一些困难<Switch>组件中使用的docs https://reacttraining.com/react-router/web/example/no-match处理 404(或不匹配)路由。

对于我的入口 JavaScript 文件,我设置了以下路由。

index.js

<Switch>
    <Route path="/login" component={Login} />
    <Route path="/forgot-password" component={ForgotPassword} />
    <Route path="/email-verification" component={EmailVerification} />
    <Route component={App} />
</Switch>

The Login组件将检查用户是否通过身份验证,如果是,则将用户重定向到/dashboard路线(通过history.replace).

The App仅当用户经过身份验证时才能访问组件,并且它具有类似的检查以将用户重定向到/login如果她不是。

In my App我有更多指定的路由,我可以确定只有在用户登录时才能访问这些路由。

App.js

<Switch>
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/accounts" component={Account} />
    <Authorize permissions={['view-admin']}>
        <Route path="/admin" component={Admin} />
    </Authorize>
    <Route path="/users" component={Users} />
    <Route component={NotFound} />
</Switch>

这就是我的问题. The Authorize组件检查传递的权限以查看用户是否具有这些权限,if so,它直接渲染孩子们,if not,它返回null from render().

这里的预期行为是<Route path="/admin" />当没有足够的权限并且<Route component={NotFound} />组件渲染。

根据docs https://reacttraining.com/react-router/web/example/no-match:

A 呈现第一个匹配的子项。 A 没有路径总是匹配的。

但是,如果我去任何声明的路线after the <Authorize>组件,路由器匹配null。这意味着,根据上面的例子,/users返回空值。反应路由器的预期行为是返回第一个匹配项<Switch/>组件,即使它是一个null value?

我怎样才能为这种情况提供“包罗万象”的路线(404)而不创建<PrivateRoute>App.js 中每个经过身份验证的路由的组件?应该null价值真的产生匹配吗?


不幸的是,react-router 的Switch组件无法与嵌套在其他组件内的路由一起使用,如您的示例中所示。如果你检查Switch 的文档 https://reacttraining.com/react-router/web/api/Switch, 它说:

的所有子元素都应该是 元素。

...所以你的Authorize组件作为直接子组件实际上并不合法Switch.

如果您已通读Switch组件的源代码 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js,你会发现它相当邪恶地读取每个子节点的 props 并手动应用react-router的matchPath方法针对每个孩子path (or from) 属性来确定应该渲染哪一个。

所以,你的情况发生的是Switch迭代其子级,直到到达您的Authorize成分。然后它查看该组件的 props,没有发现path or from道具,并调用matchPath在未定义的路径上。正如您自己所说,“没有路径的 总是匹配的”,所以matchPath返回 true,Switch 会渲染你的Authorize组件(忽略任何后续路由或重定向,因为它认为它找到了匹配项)。嵌套的“/admin”路由在你的Authorize然而,组件与当前路径不匹配,因此您从渲染中得到空结果。

我在工作中也面临着类似的情况。我的解决方案是替换react-routerSwitch在我的路由代码中,使用自定义组件迭代其子组件,依次手动渲染每个组件,并返回第一个返回除 null 之外的内容的结果。当我尝试过时,我会更新这个答案。

Edit:嗯,那没用。我无法找到一种受支持的方法来手动调用孩子们的“渲染”。抱歉,我无法为您提供解决方法Switch的限制。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

组件在react-router-4中匹配空值 的相关文章

  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 在浏览器中语音聊天? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在寻求建立一个小组 voice 使用服务器上的node js 在浏览器中聊天 这可能吗 如果您希望您的解决方案是基于服务器端和客
  • 在 BIRT 中输入参数后更新数据集查询

    在 BIRT 报告设计中传递参数后 如何更改或更新数据集的查询 详细说明 我有一个如下所示的查询 WHERE 该参数标记可以保存不同的值 在用户输入参数后 它看起来像这样 例如 WHERE column name 1 or WHERE co
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • ElectronJS ReferenceError:导航器未定义

    我正在尝试在电子上制作自定义标题栏 但是当我启动我的应用程序时 我遇到了 ReferenceError 导航器未定义 问题 请帮忙 这是我的 main js 中的代码片段 My Codes https i stack imgur com c
  • 如何使用 jQuery 向表中添加新行,并为其分配递增的 id

    我有一个现有的 HTML 表格 它是用户输入 GPS 点的表单的一部分 用户还可以选择上传 GPS 数据点 我想要一个用户可以按下的按钮 其中一些 Javascript 会向表中添加一个或多个新行 但新行必须继续增加表中使用的名称和 id
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • jQuery 选择器:为什么 $("#id").find("p") 比 $("#id p") 更快

    该页面的作者 http 24ways org 2011 your jquery now with less suck http 24ways org 2011 your jquery now with less suck断言 jQuery
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何将 Browserify 与外部依赖项一起使用?

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全
  • 是否可以使用打字稿映射类型来创建接口的非函数属性类型?

    所以我正在研究 Typescript 的映射类型 是否可以创建一个接口来包装另一种类型 从而从原始类型中删除函数 例如 interface Person name string age number speak void type Data
  • Keycloak javascript 适配器 `keycloak.init` 加载 404 iframe

    我正在尝试使用 javascript 适配器将 Keycloak 集成到我的客户端应用程序keycloak js 但是 我似乎无法让它发挥作用 这是我的代码 const keycloak new Keycloak realm my real
  • 从多维无穷大数组中删除数组元素

    我想删除一个特定元素 例如 我想删除元素id 76在下面的数组中 而且 数组可以无限地组合在一起 这里的问题是我无法刷新页面 因为我使用 Vue js 进行即时操作 如果我能做到这一点 我的下一个问题可能是如何在我现在想要的地方添加一个元素
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • Django 与谷歌图表

    我试图让谷歌图表显示在我的页面上 但我不知道如何将值从 django 视图传递到 javascript 以便我可以绘制图表 姜戈代码 array Year Sales Expenses 2004 1000 400 2005 1170 460

随机推荐

  • ios8 中 iphone 的 UIPopoverController 显示白屏

    在 iphone 中使用 ios8 0 以下的 UIPopovercontroller 可以正常使用此代码 但在ios8中却显示白屏 Code pickerController UIViewController alloc init UIV
  • CSS 伪元素上的事件侦听器,例如 ::after 和 ::before?

    我有一个div带有 CSS 伪元素的元素 before用作关闭按钮 而不是使用实际按钮 如何应用事件侦听器only伪元素 HTML div div CSS box before background image url close png
  • 在 Eclipse 中更改概览标尺颜色

    如何更改概览规则背景Eclipse 3 4 0 I20080617 2000 中的颜色 编辑窗口右侧的垂直条 带有一些注释 常规 gt 编辑器 gt 文本编辑器 gt 注释仅允许更改标记本身的颜色 而不是整个栏的背景 看来我的网络搜索能力越
  • Laravel afterFind 回调事件

    laravel 中是否有像 cakePHP 中那样的 afterFind 模型事件 以便我可以在任何搜索查询后格式化数据 或任何其他方式来做到这一点 Thanks 它不是一个事件 而是一个可以在模型中设置的变异器 您只需在模型中创建一个名为
  • 导出 eclipse 可部署插件和片段时出错

    我有一个 Eclipse 插件在 Eclipse 环境中运行良好 我想将其导出为 jar 文件 因此我选择了 导出 gt 可部署插件和片段 我可以得到一个jar文件 但是报告了一个错误 打开日志文件 它报告我有 1242 个问题 191 个
  • 从顶部裁剪图像

    通过设置从底部 左侧或右侧裁剪图像非常容易overflow hidden图像容器的属性 div class img container img class img src img jpg div 有没有办法从顶部裁剪图像 如果正在调整窗口大
  • 如何为react-big-calendar(fullcalendar.js)设置momentLocalizer(moment.js)?

    我在用着反应大日历 https github com intljusticemission react big calendar并需要帮助来实现所需的本地化 来自 git 的示例 import BigCalendar from react
  • 加载巨大的 XML 文件并处理 MemoryError

    我有一个非常大的 XML 文件 准确地说是 20GB 是的 我需要全部 当我尝试加载该文件时 收到此错误 Python 23358 malloc mmap size 140736680968192 failed error code 12
  • 无法在 iOS 6 中以编程方式安装 ipa 文件

    我使用 MobileInstallationInstall 在越狱 iOS 中安装 ipa 文件 在iOS5中运行良好 但在iOS6中失败 我检查了日志并发现以下内容 需要有一个名为 com apple private mobileinst
  • C 易失性变量和高速缓存

    缓存是由缓存硬件对处理器透明地控制的 因此如果我们在C程序中使用易失性变量 如何保证我的程序每次都从指定的实际内存地址读取数据而不是缓存 我的理解是 Volatile 关键字告诉编译器不应优化变量引用 而应按照代码中的编程方式读取变量引用
  • MongooseError:Model.findOne() 不再接受回调

    考虑 app get posts postId function req res const requestedPostId req params postId Post findOne id requestedPostId functio
  • 检查一个值集合是否包含另一个值集合

    假设我有两个集合 如下所示 收藏1 A1 A1 M1 M2 收藏2 M2 M3 M1 A1 A1 A2 所有值都是字符串值 我想知道 Collection1 中的所有元素是否都包含在 Collection2 中 但我不能保证顺序 并且一个集
  • 如何获取Google服务帐户访问令牌javascript

    我正在尝试为我的网站设置一个分析仪表板 以便我的领导层查看网站使用情况 我不希望他们必须拥有谷歌帐户或单独添加他们才能看到结果 我已经设置了服务帐户和 OAuth2 访问权限 我找到的所有教程都显示这样的代码 gapi analytics
  • 如何通过宏检查是否使用了 GNU libstdc++?

    如何通过宏检查是否使用了 GNU GCC libstdc STL 实现 那可能吗 我希望它能在 GCC 和 Clang 中工作 对于 Linux 上的 C 11 它可能是唯一的选择 或者是吗 据我所知 STLport 不支持 C 11 在
  • AWS Chime - 将视频分配给图块无法按预期工作

    I have an AWS Chime meeting setup in this fashion with 5 video tiles video tile 0 through video tile 4 当会议建立时 观察者回调audio
  • Android 版 usbmon

    我想分析我的设备的 USB 通信 SGS4 我到处都看到需要配置 usbmon 并将其编译到内核中 Afaik 这个模块没有内置在android linux系统中 我在编译内核方面没有太多经验 但如果有必要 我会这样做 您能说出这样做的步骤
  • 使用 LINQ 简化 foreach 循环(在每次迭代中选择两个对象)

    给定以下接口和两个类 public interface IMyObj int Id get set public class MyObj1 IMyObj public MyObj1 int id Id id public int Id ge
  • 如何将自定义排序应用于数组?

    我想以自定义的方式对数组进行排序 示例是学生的班级水平 sortBy Junior Senior Freshman Sophomore function classlevel 理想情况下 排序应返回 Freshman Sophomore J
  • geom_密度匹配geom_histogram binwitdh

    我想在 ggplot2 中的分布条形图上添加一条线以显示平均分布 但遇到了麻烦 像这样的 ggplot 调用 ggplot x aes date received geom histogram aes y count binwidth 30
  • 组件在react-router-4中匹配空值

    我正在尝试迁移到使用 React Router 4 但在理解其逻辑时遇到了一些困难