我目前正在做一个Web项目，它有两个主要部分，一个展示站点和一个用户站点。为了区分这两个不同的站点，我需要将它们分成两个设置文件，每个文件都有一个特定的头。我看到过一些解决方案，包括制作一个数组并将其Map到主文件中，但是我没有找到任何嵌套路由和组件的解决方案。
这个问题类似于this one，只是我需要实现嵌套的路由和布局组件

索引.js

<BrowserRouter>
    <Routes>
      {ShowcaseRoute}
      {UserRoute}
    </Routes>
  </BrowserRouter>

展示路线

export default function ShowcaseRoute () {
  
  const Layout = () => {
    return (
      <>
        <Header />
        <Outlet />
        <Footer />
      </>);
  }

  return (
    <Route element={<Layout />}>
      <Route index path="/" element={<Home />}/>
      <Route path='/about' element={<About />} />
      <Route path='/contact' element={<Contact />} />
    </Route>
  );
}

用户路由

export default function UserRoute () {
  return (
    <>
      <Route path='/auth'>
        <Route />
      </Route>
      <Route path='/user'>
        <Route />
      </Route>
    </>
  );
}

(The用户路由当前不完整以及此问题的原因）