React 路由器重定向条件

2023-11-25

我正在尝试制作一个按钮,仅在验证正确完成后将用户重定向到新页面。

有没有办法做这样的事情? 如何在类方法内激活路由?

import validator from './validator';

class Example {

  constructor(props) {
    super(props)
    this.saveAndContinue = thos.saveAndContinue.bind(this)
  }

  saveAndContinue () {
    var valid = validator.validate(this.props.form)
    if (valid) {
      axios.post('/path')
      <Redirect to='/other_tab'>
    } else {
      validator.showErrors()
    }
  }

  render() {
    <button onClick={this.saveAndContinue}>Save and Continue</button>
  }

}

正如所讨论的,您应该有权访问history对象通过this.props.history如上所述here.

如果你调查push功能这会将您重定向到您需要的任何路线。 例如:

// Use push, replace, and go to navigate around.
this.props.history.push('/home', { some: 'state' })

https://reacttraining.com/react-router/web/api/history

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

React 路由器重定向条件 的相关文章

  • 如何使用Create React App安装React

    嗨 我对反应真的很陌生 我不知道如何实际安装它 也不知道我需要做什么才能在其中编写代码 我下载了node js并且安装了v12 18 3以及NPM 6 14 6 但是每次我尝试在许多网站上提到的create react app安装方法中输入
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type
  • 在 React Native 中将 Props 传递到屏幕

    我已经开始学习 React Native 并且一如既往地从创建可重用组件开始 我了解了如何在创建自定义组件时传递和访问 props 我想在 React Native 中创建一个基本屏幕 它具有通用属性 并且我的应用程序中的所有屏幕都可以设置
  • 如何在react-router-dom v6中的路由组件中添加道具

    正如标题所述 我曾经有一个带有状态组件的页面 该组件根据 url 的更改获取不同的 props 现在 升级到React Router v6 我真的不明白如何让它再次工作 我确实知道现在解决这个问题的唯一方法是使用诸如 useNavigate
  • React Context 的范围是什么?

    我不清楚在哪里Context可以在 React 应用程序中创建 我可以在组件树中的任何位置创建上下文吗 如果可以 该上下文的范围是否仅限于创建它的子级 或者 Context 本质上是全局的 我可以在文档中的哪里找到这个 案例 我在页面上多次
  • React onSubmit e.preventDefault() 有时不起作用 + Axios

    现在我在 React 中面临这个奇怪的问题 其中带有 e preventDefault 的 onSubmit 函数有时会避免刷新页面 有时则不会 我创建了两个挂钩来跟踪上传的文件及其进度条 const uploadedFiles setUp
  • 仅显示某些路由的组件 - React

    我正在 React 中开发一个带有登录界面的网站 该网站显示一个自定义导航组件 但是我不希望它显示在主路线 即登录页面 上 但据我了解 静态组件不会在路线更改时重新呈现 这准确吗 我正在使用 React Router 来处理所有路由 这是我
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • Flux + React.js - 操作中的回调是好还是坏?

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin
  • 如何修复超出最大调用堆栈大小

    有一个 MERN Firebase 应用程序并收到此错误和一堆 atdeepExtend deepCopy ts 71 RangeError Maximum call stack size exceeded getApps as apps
  • 如何在 TypeScript React 项目中使用 eslint import 插件启用绝对路径别名?

    我已经安装了eslint plugin import到我的项目 我的目标是使用 import no relative parent imports error 设置禁止在我的项目中进行相对导入以增强可读性 但是 此设置会在我的项目中产生错误
  • 如何在 React js 上使用历史记录重定向到另一个页面?

    我在前端使用 Reactjs 并在后端使用 Laravel 开发了一个注册页面 我希望当我单击注册按钮时 它将被重定向到我的登录页面 我的注册组件是 handleSubmit event gt event preventDefault co
  • 将 JavaScript 数组转换为具有属性的数组

    我有一个像这样的数组从服务器返回响应 111 1010 111 1010 1010 我想将其转换为 JavaScript JSON 如下所示 branch 111 branch 1010 branch 111 branch 1010 bra
  • 内容丰富的 api markdown 转换为 HTML

    有没有什么简单的方法可以将 Markdown 文本从 Contentful api 转换为 html 代码以显示在 html 页面上 我尝试过使用 pagedown 和一些类似的技术 但似乎没有一个对我有用 我是 Contentful 的客
  • 在设定的时间后从 DOM 中删除元素

    我正在尝试找出在事件触发后从 DOM 中删除元素的 React 方法 我正在尝试发出警报 copySuccess when onClick this props handleCopyFact 被触发 然后在 5 秒后淡出该警报 每个组件的状
  • 删除旧版本的 create-react-app

    我想使用创建一个新的反应应用程序create react app脚本 我仍然安装了一个不再受支持的全局版本 因此我卸载了全局版本并尝试创建一个新版本 如下所示 npx create react app myapp 然后我得到了一个没有使用模
  • 为什么我需要使用 setState 回调来设置依赖于第一个项目的 setState 完成的第二个状态项目的状态?

    在此 componentDidUpdate 方法中 执行 setState 将引号设置为从 fetch 返回的内容后 我必须使用回调再次执行 setState 将 randomQuoteIndex 设置为调用 randomQuoteInde

随机推荐

  • 兼容类型和参数类型限定符

    这两个声明的类型是否兼容 void f char char void f char restrict char restrict 或类似 void g char void g char const 我很难在标准中找到涵盖该问题的任何内容 我
  • Dropwizard HK2注射液

    我对使用 dropwizard 还很陌生 目前我正在尝试实现 HK2 依赖注入 这在资源内部工作得很好 但在资源外部却不起作用 这是我正在做的事情 Client client new JerseyClientBuilder environm
  • 输入特征以获得默认参数提升

    免责声明 我知道这个问题的答案 我认为这可能会引起一些普遍的兴趣 问题 我们怎样才能拥有一种类型特征 能够产生由执行而产生的类型默认参数促销 动机 我希望能够可移植地使用变量参数 例如 void foo char const fmt Ple
  • ASP MVC C#:是否可以将动态值传递到属性中?

    好吧 我对 C 很陌生 我正在尝试使用 ASP MVC2 创建一个小网站 我想创建我自己的授权属性 但如果可能的话 我需要传递一些值 例如 CustomAuthorize GroupID Method Parameter public Ac
  • 如何改进该 Java 代码以查找字符串中的子字符串?

    最近 我被要求提交一份工作问题的解决方案 Problem 在字符串中查找子字符串 Input Little star s deep dish pizza sure is fantastic Search deep dish pizza Ou
  • 对 x86 上 L1 缓存行的独占访问?

    如果有一个 64 字节的缓冲区被大量读 写 那么它很可能会保留在 L1 中 但有什么办法可以强制这种行为吗 例如 给予一个核心对这 64 字节的独占访问权限 并告诉它不要与其他核心或内存控制器同步数据 以便这 64 字节始终存在于一个核心的
  • “self”在 iOS 5.1 上的调试器中不可用

    我正在尝试调试在 iOS 5 1 下运行的问题 当我在出现错误的代码内的调试器中停止并尝试使用调试器打印某些内容时 我收到消息 错误 警告 在声称捕获的上下文中停止 Objective C 对象指针 但 self 不可用 假装我们 在一般背
  • IE 的 ajax (XDR) 响应不一致

    我正在从 iframe 发出 ajax 请求 该请求通过 IE 插件注入到每个页面上 我用的是IE跨域请求因为 jQuery 的 ajax 在 IE 上失败 这在 IE8 和 9 上的运行时间为 75 另外 25 xdr onload甚至不
  • 从 RPC 编码的 WSDL 生成 Java 客户端的最简单方法是什么

    我对 Web 服务的概念不熟悉 目前正在开发一个项目 需要通过 SOAP 从外部应用程序检索一些数据 该应用程序提供了 RPC 编码的 WSDL 目前 我发现由于 RPC 被取代 用 Java 为该服务创建客户端非常困难 到目前为止 我得到
  • 从 .NET 应用程序捕获控制台输出 (C#)

    如何从 NET 应用程序调用控制台应用程序并捕获控制台中生成的所有输出 请记住 我不想先将信息保存在文件中 然后重新列出 因为我希望实时接收它 使用以下命令可以很容易地实现这一点ProcessStartInfo RedirectStanda
  • SCRIPT、STYLE 和 LINK 元素上的类型属性是否仍然需要?

    您将看到许多网站具有以下类型的代码 脚本元素 链接元素 风格元素 我的问题是这样的 Are the type当今流行的浏览器需要哪些属性 通俗指 IE 8 Firefox Webkit Opera 和 Chrome 如果你会发生什么do n
  • 在 Android Service 类中哪里停止/销毁线程?

    我通过以下方式创建了线程服务 public class TCPClientService extends Service Override public void onCreate Measurements new LinkedList
  • psycopg2 的 AWS Lambda 层

    我正在尝试创建一个新的 lambda 层来使用 psycopg2 导入 zip 文件 因为该库使我的部署包超过 3MB 并且我再也看不到 lambda 函数中的内联代码 我使用 Python 3 7 为以下 2 种情况创建了 lambda
  • 导入模块只是为了运行它

    我有一个 JavaScript 文件 它为我正在使用的表单验证库注册验证器 这些验证器可以通过该库访问 因此我不需要将其导入到任何地方 我只需要确保它运行一次 如何在 es6 中以这种方式导入模块 项目中执行此操作的最佳位置是什么 我目前将
  • 如何在firebase云函数中从通配符获取数据

    假设我触发以下事件ref users userId items newItem 我想从通配符内部获取一个值userId 我努力了var token event params userId token但它返回未定义 有什么建议么 在 fire
  • Gradle:如何从 JScience jar 依赖项中排除 javax.realtime 包(多个 dex 定义)

    我在 Android 应用程序中使用 Gradle 我想使用 JScience 库依赖项 我以这种方式添加了库 dependencies compile fileTree dir libs include jar compile org j
  • 自定义弹出编辑器中的 kendoui 验证工具提示未正确定位

    请参见jsfiddle例如 空白 名字 字段以显示验证工具提示 在正常形式中 验证工具提示正确地位于每个元素的右侧 但在网格的弹出编辑器中 它仍然尝试将工具提示放置在元素下方 就像它在内联编辑一样 我努力了 span class k inv
  • 在 Perl 中覆盖区分大小写的正则表达式

    是否可以覆盖 Perl 中先前定义的正则表达式的区分大小写 例如 如果我有以下内容 my upper qr BLAH x my lower qr upper xi warn blah lower 我希望第三行打印出正匹配 您可以添加 i正则
  • 如何让 32 位 Perl 读取 64 位 Windows 注册表?

    我有一个 32 位 Perl 安装程序 使用它我需要能够安装和卸载 32 位和 64 位应用程序 安装 32 位和 64 位就可以了 卸载32位也可以 但是 我在卸载 64 位应用程序时遇到问题 应用程序只知道应用程序的名称 如控制面板中的
  • React 路由器重定向条件

    我正在尝试制作一个按钮 仅在验证正确完成后将用户重定向到新页面 有没有办法做这样的事情 如何在类方法内激活路由 import validator from validator class Example constructor props