reactjs - 如何修复响应式抽屉以返回主链接
问题描述
我已经设置了一个响应式抽屉 ResponsiveDrawer.js 这是它的外观
class ResponsiveDrawer extends React.Component {
state = {
mobileOpen: false,
};
handleDrawerToggle = () => {
this.setState(state => ({ mobileOpen: !state.mobileOpen }));
};
render() {
const { classes, children } = this.props;
const { mobileOpen } = this.state;
const drawer = (
<div>
<Hidden smDown>
<div className={classes.toolbar} />
</Hidden>
<MenuList>
<MenuItem component={Link} to="/" >
Home
</MenuItem>
<MenuItem component={Link} to="/PatientdataPatient">
Users
</MenuItem>
</MenuList>
<MenuList>
<MenuItem component={Link} to="/BeraterdataBerater">
Beraters
</MenuItem>
</MenuList>
</div>
);
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Responsive drawer
</Typography>
</Toolbar>
</AppBar>
<nav className={classes.drawer}>
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Hidden smUp implementation="css">
<Drawer
container={this.props.container}
variant="temporary"
open={mobileOpen}
onClose={this.handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden xsDown implementation="css">
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
<div className={classes.toolbar} />
{children}
</main>
</div>
);
}
}
ResponsiveDrawer.propTypes = {
classes: PropTypes.object.isRequired,
// Injected by the documentation to work in an iframe.
// You won't need it on your project.
container: PropTypes.object,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles)(ResponsiveDrawer);
我还在另一个类中设置了路由
class App extends Component {
state = { group: [] }
async componentDidMount() {
try {
const session = await Auth.currentSession();
const group = session.accessToken.payload["cognito:groups"]
this.setState({ group })
console.log(group)
} catch (err) {
console.log('error: ', err)
}
}
render() {
// if ( this.state.group == "Berater" ) {
return (
<div>
<ResponsiveDrawer PatientdataPatient={PatientdataPatient}>
<Switch>
<Route exact path="/" render={() => <div><PatientdataPatient/></div>}/>
<Route path="/PatientdataPatient" render={props =>
<PatientdataPatient {...props}
PatientdataPatient={PatientdataPatient}/>
}></Route>
<Route path="/BeraterdataBerater" render={props =>
<BeraterdataBerater {...props}
BeraterdataBerater={BeraterdataBerater}/>
}></Route>
</Switch>
</ResponsiveDrawer>
</div>
);
我现在的问题是,当我单击( [第一个代码片段])时,除了第一个项目之外,其他两个只是加载到各自的页面中,<MenuItems>
没有在([第二个代码片段])中返回信息。<main>
Deso有人知道如何解决这个问题吗?谢谢!
解决方案
推荐阅读
- android - 当我检测到某个事件时如何让我的应用弹出?
- sql - 语言相关的列标题
- javascript - 如何在reactJs中单击特定单元格的2D网格中更改框的颜色?
- javascript - 如何设置从 app.post 发送的响应的样式?
- html - 如何更改 flexbox 中图片的大小?
- c# - Microsoft-Windows-Security-SPP 记录级别等于 0 的信息
- python - 代码片段在第一次运行时提供错误消息,但第二次将完美运行而无需进行任何更改
- google-calendar-api - 有没有办法通过 nodemailer 可靠地将日历事件添加到用户日历?
- amazon-web-services - 如何使我的 meta-aws 与我的 yocto 兼容
- python - Combine all tiff images into one single image