1

我有两种类型的路由，一种是网站/应用程序级别，一种是 SideMenu 级别，这是一种嵌套路由。我的问题是通过单击 SideMenu 的菜单项来更改内容。不知何故，我无法正确完成这项工作。一个重要的注意事项，我使用react-router-dom v6！

在我的应用程序中，我有以下内容：

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path="/" element={<MainApp {...props} />}></Route>
                <Route path="/signin" element={<SignIn />}></Route>
                <Route path="/register" element={<SignUp />}></Route>
                <Route path="*" element={<PageNotFound />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

在 MainApp 我有以下内容：

export default function MainApp(props) {
    const { classes } = props;

    return (
        <div className={classes.root}>
            <AppBar classes={classes} />
            <SideMenu classes={classes} />
            <main className={classes.appContent}>
                <Routes>
                    <Route path="dashboard" render={() => <Dashboard />} />
                    <Route path="checkout" render={() => <Checkout />} />
                    <Route path="users" render={() => <Users />} />
                </Routes>
            </main>
        </div>
    );
}

我的 SideMenu 看起来像这样：

const SideMenu = ({ classes }) => {
    return (
        <Drawer
            variant="permanent"
            className={classes.drawer}
            classes={{ paper: classes.drawerPaper }}
        >
            <NavItems />
        </Drawer>
    );
};

最后是 ListItems，它们是 SideMenu 的菜单项：

function NavItems(props) {
    return (
        <div>
            <List>
                {MenuItemsData.map((item) => {
                    return (
                        <ListItem
                            button
                            key={item.id}
                            to={item.url}
                            component={Navigate}
                        >
                            <ListItemIcon>{item.icon()}</ListItemIcon>
                            <ListItemText primary={item.title} />
                        </ListItem>
                    );
                })}
            </List>
        </div>
    );
}

通过将句柄单击传递给列表项，我确实使用道具钻孔使其工作。但我更喜欢路由器，因为它更干净、更容易理解。

所以我的问题是，如何在路由器中使用带有路由器的 SideMenu 导航内容？

4

1 回答 1

1

由于这篇博文，我找到了解决方案：https ://www.codingdeft.com/posts/react-router-tutorial/

在我的应用程序功能中，我将根“/”替换为：

<Route path="main/*" element={<MainApp {...props} />}></Route>

在 MainApp 中，我将嵌套路由（允许）修改为：

<Routes>
    <Route path="dashboard" element={<Dashboard />}></Route>
    <Route path="checkout" element={<Checkout />}></Route>
    <Route path="users" element={<Users />}></Route>
</Routes>

感谢 Drew Reese 的评论。

最后在 ListItems 我有这个：

<ListItem button key={item.id} to={item.url} component={NavLink}>
    <ListItemIcon>{item.icon()}</ListItemIcon>
    <ListItemText primary={item.title} />
</ListItem>

哪里item.url可以是“仪表板”、“结帐”或“用户”。

于 2021-12-22T11:21:16.753 回答