History.push 适用于 BrowserRouter 但不适用于 Router

Question

所以我试图在我的组件中使用 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> 忽略 history 道具。要使用自定义历史记录，请使用 import { Router } 而不是 import { BrowserRouter as Router }。

Answer 1

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

History.push 适用于 BrowserRouter 但不适用于 Router

History.push works on BrowserRouter but not Router

javascript

reactjs

browser-history