如何添加多个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

如果我正确理解你的问题，你想渲染一个带有条件子项的关于页面，并无条件地（或有条件地但与路线/路径分开）页脚。

假设正在为嵌套子路由AppToolBar渲染 an ，请通过让路由为其嵌套子路由渲染 an来继续抽象。使用包装器组件渲染。Outlet"/""/AboutMe"OutletFooterAboutMe

<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>