React history.push() 正在更新 url 但未在浏览器中导航到它 [英] React history.push() is updating url but not navigating to it in browser

问题描述

到目前为止，我已经阅读了很多关于 react-router v4 和 npm 历史库的内容，但似乎没有任何内容对我有帮助.

我的代码按预期运行，直到它应该导航并在使用 history.push() 方法更改 url 时执行简单的重定向.URL 正在更改为指定的路由，但未在按钮按下时执行重定向.提前致谢，还在学习 react-router ...

我希望按钮按下可以在没有 {forceRefresh:true} 的情况下进行简单的重定向，然后重新加载整个页面.

从'react'导入React；从'history/createBrowserHistory'导入createBrowserHistory；const history = createBrowserHistory({forceRefresh:true});导出默认类 Link extends React.Component {登出(){history.push("/注册");}使成为() {返回(<div><h1>您的链接</h1><button onClick={this.onLogout.bind(this)}>注销</button>

)}}

解决方案

检查您是否没有嵌套的 BrowserRouter 标签.

我在 react-router v4 上遇到了这个问题，但我在将应用程序更改为仅在最顶层使用 BrowserRouter 后解决了这个问题，如下例所示.

ReactDOM.render(<浏览器路由器><应用程序/></BrowserRouter>,document.getElementById('root'));

I've read many things about react-router v4 and the npm history library to this point, but none seems to be helping me.

My code is functioning as expected up to the point when it should navigate and do a simple redirect when the url is changed using the history.push() method. The URL IS changing to the specified route, but not doing the redirect on the button push. Thanks in advance, still learning react-router...

I would like for the button push to do a simple redirect without the {forceRefresh:true}, which then reloads the whole page.

import React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory({forceRefresh:true});

export default class Link extends React.Component {
  onLogout() {
    history.push("/signup");
  }
  render() {
      return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
  }
}

解决方案

Check if you don't have nested BrowserRouter tags.

I had this issue on react-router v4 but I solved it after changing the app to only have the BrowserRouter at the top most level like the example below.

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

这篇关于React history.push() 正在更新 url 但未在浏览器中导航到它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！