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历史记录对象

Answer 2

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

我在react-router v4上遇到了这个问题,但我在更改应用程序之后解决了它,只将BrowserRouter设置为最高级别,如下例所示.

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

Answer 3

Router从不导入react-router-dom​BrowserRouter

// 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 4

渲染这将在路线更改时刷新

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

反应路由器-dom：4.2.2

Answer 5

请确保您正在使用

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

不是

const history = createBrowserHistory();

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