如何解决ReactJS历史记录推送在抽屉组件中不起作用
App.js
import React from "react";
import { Router,Route,Switch } from "react-router-dom";
import history from "../src/history";
// Redux
import { Provider } from "react-redux";
import store from "./store";
function App() {
const classes = useStyles();
return (
<Provider store={store().store}>
<PersistGate loading={null} persistor={store().persistor}>
<div className={classes.root}>
<NavBar />
<Drawer />
<Router history={history}>
<Switch>
<Route path="/" exact component={Login}></Route>
<Route path="/country" exact component={Country}></Route>
<Route path="/user-create" exact component={User}></Route>
<Route path="/countries" exact component={ListView}></Route>
</Switch>
</Router>
</div>
</PersistGate>
</Provider>
);
}
// export default connect() (App);
export default App;
History.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
Drawers.js
import history from '../../history'
function TemporaryDrawer(props) {
const onRoute = (path) => {
history.push(path);
}
/......... other codes
}
const mapStateToProps = (state) => {
return { isDrawerOpen: state.auth.isDrawerOpen,token: state.auth.token };
};
export default connect(mapStateToProps,{ toggleDrawer })(TemporaryDrawer);
在Drawer组件中,我想更改路线。当我点击route方法时,可以在Web浏览器URL中看到路由名称正在更改。但是它不会在浏览器中呈现该组件。如果刷新页面,则它将呈现页面。为什么会发生这种情况?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。