如何解决History.push 适用于 BrowserRouter 但不适用于 Router
所以我试图在我的组件中使用 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 会发生变化,但组件没有呈现。问题是,如果我用 Router
替换 app.js 中的 BrowserRouter
它工作正常但我收到警告:<BrowserRouter>
忽略历史道具。要使用自定义历史记录,请使用 import { Router }
而不是 import { BrowserRouter as Router }
。
解决方法
react-router 5x 与 history 4x 兼容。检查历史版本,如果高于 4x,尝试降级到 4x 版本,它应该可以正常使用 Router
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。