React router History.push 回退到 404 路由

2023-12-12

每次我执行history.push("/path")url 更改为正确的路径,但 404 Page Not Found 组件被渲染。

// indes.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import history from "./customHistory";
import {Router} from "react-router";

ReactDOM.render(
    <React.StrictMode>
        <Router history={history}>
           <App/>
        </Router>
    </React.StrictMode>,
    document.getElementById('root')
);
/// App.tsx
import React, {Component} from "react"
import {Route, Switch} from "react-router-dom";
import {FrontPage} from './components/FrontPage'
import {LoginPage} from "./components/LoginPage";
import {PageNotFound} from "./components/PageNotFound";
import {RequestPasswordResetPage} from "./components/RequestPasswordResetPage";

export class App extends Component {

    render() {
        return (
            <Switch>
                <Route path={"/"} component={FrontPage} exact={true}/>

                <Route path={"/login"} component={LoginPage} exact={true}/>

                <Route path={"/request_password_reset"} component={RequestPasswordResetPage}
                       exact={true}/>

                <Route path={""} component={PageNotFound}/>
            </Switch>
        )
    }
}

我的历史对象如下

// customHistory.ts
import { createBrowserHistory } from "history";

export default createBrowserHistory({});

我在用户请求重置密码后调用history.push:

// RequestPasswordResetPage.tsx
private handleSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();

        AccountService.requestPasswordReset(this.state.email)
            .then((ans: Response) => {
                if (ans.ok) {
                    console.log("REDIRECT TO HOME");
                    history.push("/login");
                } else {
                    throw Error(ans.statusText);
                }
            });
    }

每次 url 更改为localhost:3000/login但是PageNotFound组件被渲染。


使用react-router v5.2.0和history v4.9.0来完成这项工作。

https://codesandbox.io/s/quizzical-dan-z3725

OR

尝试使用浏览器历史记录https://reactrouter.com/web/example/basic

当我们使用不同版本时,customHistory 似乎存在一些问题

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

React router History.push 回退到 404 路由 的相关文章

随机推荐

  • 防止 bash 脚本中的通配符

    我正在尝试编写一个对选定文件进行操作的脚本 bin bash ytest lastArgNo sPattern lastArgNo echo operating on sPattern do operation on sPattern fo
  • 与类加载相关的战争部署错误

    当我部署我的战争文件并运行它时 它会给出类似的错误 org springframework instrument classloading tomcat TomcatInstrumentableClassLoader Jan 6 2011
  • 将 ggplot 色阶渐变应用于部分数据

    我有一个关于应用 ggplot 的色阶渐变的问题 我有数据集 其中响应变量是连续变量 包括正数和负数 自变量是许多独立站点 我试图以这样的方式绘制数据 以便可以在背景中绘制所有数据 然后将色阶渐变应用于覆盖数据负范围的响应数据 这是迄今为止
  • 循环比休息更重要?

    我想在用户单击我的按钮时执行简单的代码 第一 将光标更改为 等待 下一步 执行循环 循环完成后 将光标更改回 默认 我写了这段代码 HTML
  • 对 RGB 值使用逻辑位移位

    当谈到按位逻辑时 我有点天真 我有一个可能是一个简单的问题 基本上 如果我有这个 是 ActionScript 但可以应用于多种语言 var color uint myObject color var red uint color gt g
  • 有没有好的 Markdown Javascript 库或控件? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 我想建立一个网站 用户可以
  • text() R 函数 - 如何更改单个单词的字体?

    text x y font 2 text 更改整个 文本 的字体 但是是否可以更改 文本 中单个单词的字体 Yep plot new text 0 5 0 5 expression paste bold bold not bold 看一眼
  • Ada:包装概念[关闭]

    Closed 这个问题是基于意见的 目前不接受答案 这是我之前的帖子的后续内容 Ada 了解私有类型并了解包装 一个实现Rectangular类型是使用一种实现来制作的 即Rectangular Method 1此实现需要一个规范文件和一个
  • 我如何在 CSS 中使用自定义字体

    为了使用浏览器不支持的自定义字体 我可以尝试哪些选项 更新 截至 2015 年 最好的选择是使用 CSS3 font face 几乎所有地方都支持它 Google Fonts 平台上有很好的例子 正确的知道可能最好的选择是 cufon ht
  • 安装声称已成功,但在设备上找不到应用程序

    Xcode 给了我这条消息 无法找到已安装的应用程序安装声称有 成功 但在设备上找不到应用程序 捆绑包 ID 无效的 我刚刚开始使用 Pod 我该如何解决 我在通过 XCode 11 Beta 4 在 iOS 13 上测试 Cordova
  • 如何在Chef客户端上设置节点属性?

    我正在使用厨师 客户食谱将机器配置为厨师客户端 创建此客户端时如何配置节点属性 我不想做knife node edit 我的目标是在创建此节点时设置一些节点属性 可能是通过向 JSON 文件添加一些内容 UPDATE 我正在创建数百个将使用
  • Plotly:如何在plotlyexpress中找到趋势线系数?

    如何在plotlyexpress中找到趋势线的系数 例如 我使用下面的代码来绘制趋势线 但现在我想知道系数 import plotly express as px px scatter df x x data y y data trendl
  • 计算日期范围内的天数?

    我有一个这样的查询 SELECT COUNT AS amount FROM daily individual tracking WHERE sales YES AND daily individual tracking date BETWE
  • Mac Automator - 合并 PDF 文件,保存在同一文件夹中

    我正在使用 Automator 合并 PDF 文件 但无法弄清楚如何自动将生成的文件保存到同一文件夹中 相反 它会询问我将文件放在哪里 我将其用作服务 这是我现有的工作流程 1 服务在 任何应用程序 中接收选定的 PDF 文件 2 合并PD
  • C# 中只有 Date 类型 - 为什么没有 Date 类型?

    在我们的 C 项目中 我们需要表示没有时间的日期 我知道的存在DateTime但是 它也包含一天中的某个时间 我想明确指出某些变量和方法参数是基于日期的 因此我不能使用DateTime Date财产 解决这个问题的标准方法是什么 为什么没有
  • maxlength 在 ckeditor angularjs 指令的文本区域中不起作用

    我已经使用 ckeditor 插件在 angularjs 中创建了一个应用程序 我已经为 ckeditor 创建了一个指令 该应用程序工作正常 但问题是我需要将最大字符长度设置为 50 所以我把maxlength 50 但它不起作用 谁能告
  • 为什么ArrayDeque比LinkedList更好

    我试图理解为什么Java的ArrayDeque比Java的LinkedList更好因为它们都实现了 Deque 接口 我几乎没有看到有人在他们的代码中使用 ArrayDeque 如果有人更深入地了解 ArrayDeque 的实现方式 那将会
  • JavaScript 中的 window.location.href 与 window.location.replace 与 window.location.assign

    有什么区别 window location href http example com window location replace http example com window location assign http example
  • Microsoft Azure:添加用户并将其映射到数据库+添加数据库角色

    我是 Azure 的新手 所以请耐心等待 使用 SSMS 中的导出工具 我设法将所有表从本地数据库复制到 Azure 现在最重要的部分 添加用户并将其映射到数据库还没有解释 还向数据库添加角色 也许它被解释了 但我真的不明白其中的一个字 在
  • React router History.push 回退到 404 路由

    每次我执行history push path url 更改为正确的路径 但 404 Page Not Found 组件被渲染 indes tsx import React from react import ReactDOM from re