在侧边菜单的路由中反应路由

Question

我有两种类型的路由，一种是website/app级别，一种是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>
    );
}

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

所以我的问题是，如何在 Router 中使用 SideMenu 和 Router 来导航内容？

Answer 1

感谢这个博客 post 我找到了解决方案：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 可以是“仪表板”、“结帐”或“用户”。

在侧边菜单的路由中反应路由

React Routes within Routes for Side Menu

reactjs

react-router

material-ui

react-router-dom

materialdrawer