Reactjs 使用此.props.history.push（"；/path"；）将重新呈现，然后返回

在进一步调试后编辑了问题

我有一个奇怪的问题，尝试了一段时间来解决它，但我不能

我有一个名为

NewGoal.jsx

的React组件，在用户提交新目标后，我尝试将其重新路由到我的“目标”页面。 问题是：在他们提交我的目标页面中的浏览器加载后，但只加载了一秒钟。然后继续并返回到NewGoal页面！！ 我试图理解为什么会发生这种情况，我开始觉得这可能是一个异步问题。 这是我的代码，目前它正在使用

async await

，我也使用

.then（）

尝试了相同的想法，但也不起作用：

 async handleSubmit(event)
 {
   const response = await axios.post("http://localhost:8080/addGoal", 
    {
       goalID: null,
       duration: this.state.days,
       accomplishedDays: 0,
       isPublic: this.state.isPublic,
       description: this.state.name,
       dateCreated: new Date().toISOString().substring(0,10),

     }) */
   // push to route 
     this.props.history.push("/goals");   
  }

在调试过程中，我尝试删除了发布新消息的功能，只做了一个history.push，代码如下-这完全有效

      // THIS WORKS
    async handleSubmit(event)
    {
         // push to route 
          this.props.history.push("/goals");    
    }

但是，只要我向函数添加任何其他内容，无论是在

history.push之前还是之后，它都会停止工作。
任何建议都将不胜感激！
谢谢
在React Router文档中，开发人员讨论了历史对象是如何可变的。他们的建议是不要直接修改它


幸运的是，在React的生命周期事件中，很少有方法可以通过编程更改用户的位置

我发现最简单的也是最新的。React路由器使用React上下文API使路由器使用的历史对象可供其后代使用。这将节省您通过道具沿组件树传递历史对象的时间

您需要做的唯一一件事是确保
AddNewGoalPage
使用
context
中的历史对象，而不是道具

handleSubmit(event)

    ...

    //successful, redirect to all goals
    if(res.data)
    {
      this.context.history.push("/goals")
    }

    ...
  })

}

我不知道您是在使用类组件还是函数组件进行
AddNewGoalPage
——但是您的handleSubmit方法提示它是类的成员，因此路由器的历史对象将通过
this.context.history
在您的类中自动可用

如果您使用的是功能组件，则需要确保handleSubmit方法已正确绑定到功能组件，否则React提供的
上下文
功能组件参数将不可用

如果是这种情况，请随时回复我。
谢谢您的帮助，Kraig，我更改了代码以使用此.context.history.push（），这次它从未离开页面。它只是重新加载相同的AddNewGoalPage（这是一个组件）。但是当重新加载时，所有状态都被重置，现在我的用户信息在网站上的时间更长了，所以他们就像“注销”了一样，我觉得你的链接组件实际上就像一个普通的锚一样工作——触发了浏览器导航。我鼓励您在带有路径的路由中呈现路由组件，并确保您的链接具有有效的
to
属性，而不是href