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

Answer 2

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

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

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

Answer 3

呈现此内容将在路线更改时刷新

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

react-router-dom：4.2.2

Answer 4

请确保您正在使用

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

不是

const history = createBrowserHistory();

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

Answer 5

我有同样的问题。

经过一番搜索，我发现了react-router issue

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

Answer 6

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

否则您可以简单地调用此功能

window.location.reload(false);

history()函数之后，该函数会重新加载页面

React history.push（）正在更新url但不在浏览器中导航到它

8 个答案: