ReactJS中this.props.history.push()无报错不跳转相关问题咨询

问题1：this.props.history.push()不生效、App组件读取props.history未定义原因 #

子问题1.1 App组件直接读props.history报未定义的原因 #

react-router-dom v5 规则中，只有被<Route>组件直接渲染的组件，才会默认被注入history、location、match三个路由属性。你的App组件是<Router>的直接子组件，没有被<Route>包裹，所以props上默认没有history属性，必须通过useHistory Hook手动获取，属于正常逻辑。

子问题1.2 RouterPage2中执行this.props.history.push("/RouterPage2")无反应的原因 #

你触发方法时的当前页面路径本来就是/RouterPage2，react-router默认逻辑为：push同一个已激活的路径时，不会触发任何路由跳转/重渲染行为，因此没有报错也没有可见反应。
如果你提交数据后需要刷新当前页面的列表数据，不需要跳转路由，直接在fetch请求成功后重新调用一次获取列表的逻辑即可：

// 修改addastakeholder方法的成功回调
fetch("http://localhost:8080/OneToOneMappingPractice/add", {
    method: "POST",
    headers: { "Content-type": "application/json" },
    body: newstakeholder,
}).then((r) => {
    if (r.ok) {
        this.setState({ newstakeholder: { name: "", address: { house_number: "", streetName: "" } } });
        // 重新拉取列表数据，不需要跳转
        fetch("http://localhost:8080/OneToOneMappingPractice/getAll")
            .catch((error) => this.setState({ errorString: error }))
            .then((result) => result.json())
            .then((result) => this.setState({ stakeholders: result }));
    }
});

如果你确实需要强制刷新当前路由，可以用replace代替push：

this.props.history.replace("/RouterPage2");

问题2：使用window.location.href跳转后看不到POST请求日志的原因 #

window.location.href赋值会触发浏览器整页重载，火狐开发者工具Network标签默认开启了「页面加载时清空日志」的设置，跳转前的POST请求日志会被新页面的请求覆盖清空。
你可以在火狐Network标签页勾选「持久化日志（Persistent logs）」选项，就可以看到跳转前的请求记录。 #

额外说明：this.context.history报未定义的原因 #

react-router v5 中要通过context获取history，需要先给类组件声明contextType为RouterContext，或者使用withRouter高阶组件包裹组件，直接调用this.context.history是取不到值的。
如果不想手动传history给子组件，也可以用withRouter包裹RouterPage2，不需要父组件传参就可以直接访问路由对象：

import { withRouter } from "react-router-dom";
// 导出组件时包裹
export default withRouter(RouterPage2);

内容的提问来源于stack exchange，提问作者Amit Dev