在 MaterialUI 侧边栏中使用 React Router

Question

我使用 MaterialUI 代码 ( https://material-ui.com/components/drawers/ ) 创建了此内容。 我还尝试修改它以实现一些路由器。 这个想法是侧边栏中的一些按钮会改变内容。 这是我正在使用的代码：

export default function Main(props) {
  const { window } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen)
  }

  const drawer = (
    <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>
            <Link to='/'>
                <ListItem button>
                    <ListItemIcon><HomeIcon /></ListItemIcon>
                    <ListItemText primary="Home" />
                </ListItem>
            </Link>
            <ListItem button>
                <ListItemIcon><GamesIcon /></ListItemIcon>
                <ListItemText primary="Play Game" />
            </ListItem>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Create Game" />
            </ListItem>
            <Link to='/add_question'>
                <ListItem button>
                    <ListItemIcon><AddBoxIcon /></ListItemIcon>
                    <ListItemText primary="Add Questions" />
                </ListItem>
            </Link>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Add Question Categories" />
            </ListItem>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Add Participants" />
            </ListItem>
        </List>
    </div>
  );

  const container = window !== undefined ? () => window().document.body : undefined;

  return (
    <Router>
        <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        edge="start"
                        onClick={handleDrawerToggle}
                        className={classes.menuButton}
                    >
                        <MenuIcon />
                    </IconButton>
                <Typography variant="h3" noWrap>
                    Trivia Game
                </Typography>
            </Toolbar>
        </AppBar>
            <nav className={classes.drawer} aria-label="mailbox folders">
            {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                    >
                        {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} />
                <Switch>
                    <Route path='/'>
                        <CreateCategories />
                    </Route>
                    <Route path='/add_question'>
                        <CreateQuestions />
                    </Route>
                </Switch>
            </main>
        </div>
    </Router>
  );
}

我遇到的问题是，当我单击带有链接的按钮时，它不会更改内容。 当内容加载时，它会显示链接到/的内容，但是当我按下按钮时我无法更改它。 正如你所看到的，我现在有两个链接，但就像我提到的那样，它们没有切换。

另外作为一个附带问题，无论如何我可以使用这些路由器来完全替换页面中的内容吗？ 我见过的所有示例都要求您有某种导航，但是如果我想切换到具有不同导航的不同页面怎么办？

Answer 1

你试过吗

withRouter(Component);

我已经解决了我的问题。

Answer 2

您可以尝试使用 useHistory 钩子内置或历史 API HTML5 代替。 这是您的一种选择。

history.pushState

history.replaceState

Answer 3

这就是问题所在：React Router 的工作方式是，当 Routes 位于 Switch 内时，只要您链接的路径与 Route 匹配，它就会呈现。 例如，我想去/add_question ，但由于我的第一条路线有/ ，而/add_question也有/ ，它立即匹配。 有两种方法可以解决这个问题：要么将/ Route 最后放在 Switch 中，要么在 Route 中使用exact一词，这样/ Route 仅在路径正好是/时才呈现。

            <Switch>
                <Route path='/' exact>
                    <CreateCategories />
                </Route>
                <Route path='/add_question'>
                    <CreateQuestions />
                </Route>
            </Switch>