React history.push() 正在更新 url 但不在浏览器中导航到它答案

【问题标题】：React history.push() is updating url but not navigating to it in browserReact history.push() 正在更新 url 但不在浏览器中导航到它
【发布时间】：2017-08-13 23:31:59
【问题描述】：

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

当使用 history.push() 方法更改 url 时，我的代码应该按预期运行并进行简单的重定向。 URL 正在更改为指定的路由，但未在按钮推送时进行重定向。先谢谢了，还在学习react-router...

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

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>
      )
  }
}

【问题讨论】：

标签： history.js react-router-v4

【解决方案1】：

您不需要降级到 v3，React-Router 4.0.0 完全能够完成 OP 的要求。

const history = createBrowserHistory();

是一个自定义历史对象，因此您应该使用<Router> 将其与react-router 同步，而不是<BrowserRouter>，这是我假设您使用的。

试试这个：

import React, {Component} from 'react';
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();   

class App extends Component {
   constructor(props){
      super(props);
   }
 
   render(){
       return (
           <Router history={history}>   //pass in your custom history object
                <Route exact path="/" component={Home} />
                <Route path="/other" component={Other} />
           <Router />
       )
   }
}

一旦您的自定义历史记录对象通过路由器的历史记录道具传入，history.push 应该可以在您应用的任何位置按预期工作。（您可能希望将历史记录对象放在历史配置文件中，然后将其导入您希望以编程方式进行路由的位置）。

欲了解更多信息，请参阅：React Router history object

【讨论】：

哇，谢谢！这是我见过的唯一答案，它解释了在使用 history 包时需要使用 <Router/> 而不是 <BrowserRouter/>。
这是我在过去 4 天的搜索中找到的最正确的解决方案
非常感谢，history 现在可以与一起使用，但 basename 停止在其中工作。在中，基本名称有效，但历史记录无效:-(
非常感谢。它不能与 BrowserRouter 一起使用，但在更改为 Router 并将我的历史记录添加为参数之后，它就像一个魅力
优秀的答案，写给像我这样的菜鸟的关键原因

【解决方案2】：

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

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

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

【讨论】：

我也有同样的问题，但还是没有解决办法

【解决方案3】：

从react-router-dom而不是BrowserRouter导入Router

// index.js

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


    ReactDOM.render(
      <Router history={history}>
        <App />
      </Router>,
      document.getElementById("root"));

    serviceWorker.register();


// history.js 

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

在您需要导航的其他组件上导入历史并推送

import History from '../utils/history'

History.push('/home')

【讨论】：

【解决方案4】：

渲染它会在路由更改时刷新

 `ReactDOM.render(
    <AppContainer>
      <BrowserRouter children={routes} basename={baseUrl} forceRefresh={true}/>
    </AppContainer>,
    document.getElementById("react-app")
  );`

react-router-dom : 4.2.2

【讨论】：

【解决方案5】：

请确保您正在使用

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

不是

const history = createBrowserHistory();

添加“{forceRefresh:true}”后，我就可以更新页面了

【讨论】：

它重新加载整个页面我猜这不是预期的 bahviour
它也会更新状态。这不是正确的方法
你是个救命的人，正是我要找的人

【解决方案6】：

我也有同样的问题。

经过一番搜索，我找到了这个react-router issue

我目前已将 react-router 降级到 v3，我使用 react-router 包中的 browserHistory，它工作正常。

【讨论】：

是的，我也是这么做的，我打算暂时坚持使用 v3。谢谢！

【解决方案7】：

如果您使用的是函数式组件，请尝试使用useHistory Hook 进行推送。

import React from 'react';
import { useHistory } from "react-router-dom";

export default function Link{

  let history = useHistory();

  onLogout() {
    history.push("/signup");
  }

  return(
        <div>
          <h1>Your Links</h1>
          <button onClick={this.onLogout.bind(this)}>Log Out</button>
        </div>
      )
}

【讨论】：

【解决方案8】：

你可以使用

forceRefresh={true}

在 BrowserRouter 或路由器内部的代码中

【讨论】：