Reactjs REACT路由DOM根据参数呈现不同的路由

我目前正在开发一个带有管理仪表板的Reaction应用程序，该仪表板有不同的"标签"，我将它们集成到一个路由中.管理员登录后，应用程序会导航到/admin.这个页面的 idea 是，我有一个带有不同页面的侧菜单.在AdminView中，我想根据我提供的id显示特定的组件:

以下是显示管理视图的主路由

<Route path="/admin">
   <Route path="login" element={<AdminLogin />} />
   <Route path=":page" element={<AdminView />} />
</Route>

在Admin视图中，我有这样的东西:

我正在 Select 要显示的组件，该组件基于:page:

  const getTable = () => {
    switch (table) {
      case 'realms':
        return RealmsTable;
      case 'clients':
        return ClientsTable;
      case 'users':
        return UsersTable;
      case 'roles':
        return RolesTable;
      case 'management':
        return Management;
      default:
        return NotFoundtView;
    }
  };

  const Table = useMemo(getTable, [table]);

Select 该组件后，我将按如下方式显示它:

    <Layout className="dashboard-layout" hasSider>
      <DSider />
      <Layout>
        <DHeader />
        <Content>
          <Suspense>
            <Routes>
              <Route index Component={Table} />
            </Routes>
          </Suspense>
        </Content>
      </Layout>
    </Layout>

这是我想做的，但我觉得我做错了.有没有更干净的方法？

作为参考:

我用的是react 18和react-router-dom v6

更多信息:

我提到了一个与所选表同步的sider:

const { table } = useParams();
return (
    <Sider>
      <Menu
        className="no-bg"
        items={items}
        onClick={onMenuSelect}
        mode="inline"
        defaultSelectedKeys={[table!]}
        inlineCollapsed={collapsed}
        theme="dark"
      ></Menu>
    </Sider>
  );

这是一个基本的antd Menu组件，我使用id作为菜单项的键:

const items: MenuItem[] = [
  {
    type: 'divider',
    className: 'menu-devider'
  },
  {
    key: 'realms',
    label: 'Realms',
    className: 'menu-item',
    icon: <ReactSVG src="/svg/realms.svg" />
  },
  {
    type: 'divider',
    className: 'menu-devider'
  },
  {
    key: 'clients',
    label: 'Clients',
    className: 'menu-item',
    icon: <ReactSVG src="/svg/clients.svg" />
  },
  {
    type: 'divider',
    className: 'menu-devider'
  },
  {
    key: 'users',
    label: 'Users',
    className: 'menu-item',
    icon: <ReactSVG src="/svg/users.svg" />
  },
  {
    type: 'divider',
    className: 'menu-devider'
  },
  {
    key: 'roles',
    label: 'Roles',
    className: 'menu-item',
    icon: <ReactSVG src="/svg/roles.svg" />
  },
  {
    type: 'divider',
    className: 'menu-devider'
  },
  {
    key: 'management',
    label: 'Management',
    className: 'menu-item',
    icon: <ReactSVG src="/svg/management.svg" />
  },
  {
    type: 'divider',
    className: 'menu-devider'
  }
];