javascript - Reactjs历史推送在抽屉组件中不起作用
问题描述
应用程序.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;
历史.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);
在抽屉组件中,我想更改路线。当我点击路由方法时,我可以在 Web 浏览器 URL 中看到路由名称正在更改。但它不会在浏览器中呈现组件。如果我刷新页面,那么它将呈现页面。为什么会发生这种情况?
解决方案
推荐阅读
- branch - 有人使用anylogic 与Branch 合作吗?
- flutter - 颤振:如何制作自定义颤振容器?
- javascript - 我无法使用 Id 选择元素?
- javascript - 水平折叠仅扩展 1 个元素而不是所有元素
- reactjs - 'isValid' 总是假的
- javascript - 没有登录Angular的用户交互?
- javascript - 如何在多个输入标签html中添加更多图像?
- xcode - Xcode 中的 UserDefault 不保存文本
- forms - 将表单数据传递给 JSP 而不传递给服务器
- java - com.squareup.okhttp3 (3.14.0) 在 Android 7 上导致异常?