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

您尝试过

{{1}}

我已经解决了我的问题。

Answer 2

您可以尝试改用useHistory钩子内置函数或history API HTML5。这是您的一种选择。

history.pushState

history.replaceState

Answer 3

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

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

在MaterialUI边栏中使用React Router

3 个答案: