83

到目前为止，我已经阅读了很多关于 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>
      )
  }
}
4

9 回答 9

71

您不需要降级到 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 历史对象

于 2017-04-08T10:17:13.067 回答
44

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

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

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
于 2017-05-03T13:46:39.327 回答
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')
于 2019-11-18T04:20:20.917 回答
5

渲染这将刷新路由更改

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

反应路由器域：4.2.2

于 2018-07-03T05:07:33.567 回答
4

请确保您正在使用

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

不是

const history = createBrowserHistory();

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

于 2020-08-26T18:43:57.610 回答
0

我也有同样的问题。

经过一番搜索，我发现了这个react-router 问题

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

于 2017-03-23T17:32:46.400 回答
0

您可以使用

forceRefresh={真}

在 BrowserRouter 或 Router 内部的代码中

于 2021-11-19T08:24:00.337 回答
0

如果有人在这里使用 react-router-dom v6

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

并解决了问题。

于 2022-01-31T17:53:23.467 回答
0

如果您使用的是功能组件，请尝试使用useHistoryHook 推送。

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>
      )
}
于 2021-06-17T17:55:44.797 回答