javascript - 如何添加多个 Outlet 组件 react router dom V6？

Question

我正在使用 react-router-dom V6 和我想知道是否可以同时添加多个 Outlet 组件，因为我希望有一个部分可替换和一个页脚
这就是我尝试的

<Route path = "/" element={<AppToolBar/>} >
            <Route path = "/AboutMe" element={<AboutMe />}>
              <Route path="/AboutMe" element={<AboutMeIntro />} />
              <Route path="/AboutMe" element={<Footer />} />
            </Route>
</Route>

但它不起作用，因为它不能识别彼此之间的差异，所以它只会渲染两次第一个而不是渲染第一个和第二个。有任何想法吗 ？也许我忽略了一些重要的事情
它是这样渲染的

更新
答案肯定成功了

 <Route path = "/" element={<AppToolBar/>} >
    <Route path="/AboutMe" element={( <> <AboutMe /> <Footer /> </> )} >
      <Route path="/AboutMe" element={<AboutMeIntro />} />
    </Route>
  </Route>

Answer 1

如果我正确理解您的问题，您希望呈现一个带有条件子级的 about 页面，并且无条件地(或有条件地但与路由/路径分开)一个页脚。
假设 AppToolBar正在渲染 Outlet用于嵌套 "/"子路由，通过 "/AboutMe" 继续抽象路线渲染 Outlet为其嵌套的子路由。渲染 Footer与 AboutMe包装组件。

<Route path="/" element={<AppToolBar/>} >
  <Route
    path="/AboutMe"
    element={(
      <>
        <AboutMe />
        <Footer />
      </>
    )}
  >
    <Route path="/AboutMe" element={<AboutMeIntro />} />
  </Route>
</Route>

如果您想有条件地渲染 Footer然后有条件地渲染。
例子:

<Route path="/" element={<AppToolBar/>} >
  <Route
    path="/AboutMe"
    element={(
      <>
        <AboutMe />
        {condition && <Footer />}
      </>
    )}
  >
    <Route path="/AboutMe" element={<AboutMeIntro />} />
  </Route>
</Route>

您可以通过将 JSX 抽象为一个新的包装器组件来稍微清理一下:

const AboutMeWrapper = () => (
  <>
    <AboutMe />
    {condition && <Footer />}
  </>
);

...

<Route path="/" element={<AppToolBar/>} >
  <Route path="/AboutMe" element={<AboutMeWrapper />} >
    <Route path="/AboutMe" element={<AboutMeIntro />} />
  </Route>
</Route>

或将页脚抽象为 AboutMe零件。
例子:

const AboutMe = () => {
  // business logic

  return (
    <>
      <div /* AboutMe layout styling */ >
        ...
        <Outlet />
        ...
      </div>
      {condition && <Footer />}
    </>
  );
};

...

<Route path="/" element={<AppToolBar/>} >
  <Route path="/AboutMe" element={<AboutMe />} >
    <Route path="/AboutMe" element={<AboutMeIntro />} />
  </Route>
</Route>