反應中的嵌套路由

Question

我正在嘗試在我的 React 應用程序中實現嵌套路由我的根 app.jsx 文件中的路由是這樣定義的。

    <>
      <Router>
        <DrawerContextProvider>
        <Appbar />
        <Switch>
          <Route exact path='/admin'>
            <Admin/>
          </Route>
          <Route path='/technician' component={Technician} />
          <Route path='/accountmanager' component={AccountManager} />
        </Switch>
        </DrawerContextProvider>
      </Router>
    </>

這是我的管理組件中的代碼

function Admin() {
    const classes = useStyles();
    const { open } = useContext(DrawerContext)
    const { url, path } = useRouteMatch();

    return (
        <>
            <SideMenu iconsandnames={iconsandnames} />
            <div>
                <main
                    className={clsx(classes.content, {
                        [classes.contentShift]: open,
                    })}
                >
                    <div className={classes.drawerHeader} />
                    <Switch>
                        <Route exact path={path} >
                            <Dashboard />
                        </Route>
                        <Route  path={`${path}/:id`} >
                            <Outlet />
                        </Route>
                    </Switch>
                </main>
            </div>
        </>
    )
}

function Outlet() {
    const { id } = useParams();
    console.log(id);

    return (
        <div>
          <h3>{id}</h3>
        </div>
      );

}

這是我的側邊菜單組件中的代碼

export default function MiniDrawer({ iconsandnames }, props) {
    const classes = useStyles();
    const theme = useTheme();
    const { url, path } = useRouteMatch();
    const { open, handleDrawerClose } = useContext(DrawerContext)


    return (
        <div >
            <Drawer
                variant="permanent"
                className={clsx(classes.drawer, {
                    [classes.drawerOpen]: open,
                    [classes.drawerClose]: !open,
                })}
                classes={{
                    paper: clsx({
                        [classes.drawerOpen]: open,
                        [classes.drawerClose]: !open,
                    }),
                }}
            >
                <div className={classes.toolbar}>
                    <IconButton onClick={handleDrawerClose}>
                        {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                    </IconButton>
                </div>
                <Divider />
                <List>
                    {iconsandnames.map((data) => (
                        data.text == "Home" ? (
                            <Link to={url}>
                            <ListItem button key={data.text} >
                                <ListItemIcon><Icon>{data.iconname}</Icon></ListItemIcon>
                                <ListItemText primary={data.text} />
                            </ListItem>
                        </Link>):
(                        <Link to={`${url}/${data.route}`}>
                            <ListItem button key={data.text} >
                                <ListItemIcon><Icon>{data.iconname}</Icon></ListItemIcon>
                                <ListItemText primary={data.text} />
                            </ListItem>
                        </Link>)
                    ))}
                </List>
            </Drawer>
        </div>
    );
}

這是我傳入側邊菜單的圖標和名稱數組

const iconsandnames = [
    {
        iconname: 'home',
        text: 'Home',
        route: 'home'
    },
    {
        iconname: 'rounded_corner',
        text: 'Projects',
        route: 'projects'
    },
    {
        iconname: 'account_box',
        text: 'Account managers',
        route: 'accountmanagers'
    },
    {
        iconname: 'build',
        text: 'Contractors',
        route: 'contractors'
    },
    {
        iconname: 'perm_identity',
        text: 'Clients',
        route: 'clients'
    },
    {
        iconname: 'work_outline',
        text: 'Work Orders',
        route: 'workorders'
    },
    {
        iconname: 'preview',
        text: 'Additional',
        route: 'additional'
    },
]

http://localhost:3000/admin 顯示我

http://localhost:3000/admin/projects 顯示我

理想情況下，當我切換路線時，側邊菜單不應該消失，而是在這里消失。 關於可能是什么問題以及如何解決它的任何想法？

Answer 1

問題

您在“/admin”路徑上指定了exact道具，因此無法再匹配和呈現任何嵌套路由。

<Route exact path='/admin'>
  <Admin/>
</Route>

行政

<Switch>
  <Route exact path={path} > // <-- can match
    <Dashboard />
  </Route>
  <Route  path={`${path}/:id`} > // <-- can't match
    <Outlet />
  </Route>
</Switch>

解決方案

將Route組件渲染到Switch ，路徑順序和特異性很重要。 您將希望從更具體到不太具體的路徑對路徑進行排序，以便讓更具體的路徑有機會在不太具體的路徑之前先進行匹配和呈現。

路由 - 從 "/admin" 路由中刪除exact道具，以便可以匹配任何嵌套路由。

<>
  <Router>
    <DrawerContextProvider>
    <Appbar />
    <Switch>
      <Route path='/admin'>
        <Admin/>
      </Route>
      <Route path='/technician' component={Technician} />
      <Route path='/accountmanager' component={AccountManager} />
    </Switch>
    </DrawerContextProvider>
  </Router>
</>

管理員 - 按特殊性重新排序路由。

<Switch>
  <Route path={`${path}/:id`} >
    <Outlet />
  </Route>
  <Route path={path} >
    <Dashboard />
  </Route>
</Switch>