在侧菜单的路线中反应路线

Posted 2023-02-19

【中文标题】在侧菜单的路线中反应路线

【英文标题】：React Routes within Routes for Side Menu

【发布时间】：2022-01-23 03:56:12

【问题描述】：

我有两种类型的路由，一种是网站/应用级别，一种是 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 和路由器来导航内容？

【问题讨论】：

你不能把路由器放在其他路由器里面。 MainApp 中的所有 Route 组件都错误地使用了 RRDv6 中不存在的 render 属性。另外，ListItem 的 component 属性不应该是 Link 或 NavLink 而不是 Navigate 组件吗？我不明白这怎么可能奏效。

如果嵌套路由器不可行，如何使用 SideMenu 更改 main 中的内容，而不将 handleClick-callback 传递给 props 并将其向下钻取到 ListItem（SideMenu 的）？我以为 Link 来自 RRD v5，所以我使用了 v6 的 Navigate。我对 RRD 和 MUI 的抽屉有点陌生。

你将什么回调道具传递给任何东西？ Link 和 NavLink 在 RRDv6 中仍然可用。 Navigate 有效地替换了 v5 中的 Redirect 组件。

我将 handleClick 函数传递给 ListItem 以执行内容更改，但后来想用 Routers 替换此模式，因为它更简洁，更易于其他开发人员理解。我解决了问题，请参阅我自己的答案。

【参考方案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 可以是“仪表板”、“结帐”或“用户”。