history.js - React History.push() 正在更新 url，但不会在浏览器中导航到它

Question

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

我的代码按预期运行，当使用 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

您不需要降级到 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