History.push 适用于 BrowserRouter 但不适用于路由器答案

【问题标题】：History.push works on BrowserRouter but not RouterHistory.push 适用于 BrowserRouter 但不适用于路由器
【发布时间】：2021-02-04 00:24:19
【问题描述】：

所以我试图在我的组件中使用 history.push('/path') 。我的设置如下所示：

App.js

import { Router, Switch, Route } from 'react-router-dom';

// History
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

function App() {
  return (  
      <Router history={history}>
            <Switch>
              <Route path='/' exact render={(props) => <Homepage />} />
              <Route path='/search' render={(props) => <SecondComponent />} />
            </Switch>
      </Router>
  );
}
export default App;

SecondComponent.js

import React from 'react';
import { withRouter } from "react-router-dom";

const SecondComponent = ({ history  }) => {

    const myFunction = () => {
        history.push('/search');
    };

    return (
    <button onClick={() => myFunction}>stuff</button>
    );
}

export default withRouter(SecondComponent);

问题是，当我单击按钮时，URL 会发生变化，但组件不会呈现。问题是如果我将 app.js 中的 Router 替换为 BrowserRouter 它工作正常，但我收到警告：<BrowserRouter> 忽略历史道具。要使用自定义历史记录，请使用 import { Router } 而不是 import { BrowserRouter as Router }。

【问题讨论】：

能否将react-router-dom 和history 库的版本发布到您的package.json 文件中

标签： javascript reactjs browser-history

【解决方案1】：

react-router 5x 与 history 4x 兼容。查看历史版本，如果高于4x，尝试降级到4x版本，Router应该可以正常使用

【讨论】：