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

Posted 2023-02-19

【中文标题】如何添加多个 Outlet 组件 react router dom V6？

【英文标题】：How to add more than one Outlet component react router dom V6?

【发布时间】：2022-01-22 10:17:52

【问题描述】：

我正在使用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>

【参考方案1】：

如果我正确理解了您的问题，您希望呈现一个带有条件子级的 about 页面，并且无条件地（或有条件地但与路线/路径分开）一个页脚。

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

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

【讨论】：

让我检查一下，但首先对于您的第一个问题，是的 AppToolBar 正在呈现关于我，然后关于我正在呈现中间组件，在这种情况下是“介绍”但我不知道现在在哪里渲染页脚，因为我不能在同一个上做两个。让我先检查你的答案，看看我能做什么。谢谢你，我会在一分钟内告诉你它是否有效。