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

Question

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

当使用 history.push() 方法更改 url 时，我的代码按预期运行，直到它应该导航并进行简单的重定向。 URL 正在更改为指定的路由，但不会在按下按钮时进行重定向。在此先感谢，仍在学习反应路由器...

我希望按下按钮可以在没有 {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>
      )
  }
}

Answer 1

我也遇到了同样的问题

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

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

Answer 2

你不需要降级到 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 />
       )
   }
}

一旦您的自定义历史记录对象通过 Router 的 history 属性传入，history.push 应该可以在您的应用程序的任何地方正常工作。（你可能想把你的历史对象放在一个历史配置文件中，并将它导入到你想以编程方式路由的地方）。

有关详细信息，请参阅：React Router history object

Answer 3

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

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

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

Answer 4

渲染此内容会在路线更改时刷新

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

反应路由器-dom：4.2.2

Answer 5

从 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')

Answer 6

请确保您正在使用

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

没有

const history = createBrowserHistory();

添加“{forceRefresh:true}”后我能够更新页面

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

Answer 8

你可以使用

forceRefresh={true}

在 BrowserRouter 或 Router 中编写代码

Answer 9

以防有人使用 react-router-dom v6

我遇到了同样的问题，我不得不降级到 v5

问题已解决。

Answer 10

如果您不想更改路由器或版本，您可以在更新历史记录后强制重新加载页面。

例如：

history.push({
    'pathname': '/signup',
    'key': 'value'
})   
document.location.reload()

Answer 11

该功能已在 react-router-dom v6 中删除。最好的方法是

创建一个默认值为 null 的状态，并在异步操作后修改该状态，然后
在组件内部创建一个 if 语句来检查状态和重定向。
添加一个将状态值重置为 null 的调度操作

Answer 12

为了使用 history prop，你应该使用从“react-router”导入的 Router 而不是从“react-router-dom”导入的 BrowserRouter“

”

然后 history.push('/home') 随心所欲。

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

React history.push() is updating url but not navigating to it in browser

history.js

react-router-v4