How to add more than one Outlet component react router dom V6?-CodePudding

I'm using

UPDATE

Answer definitely did the trick

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

CodePudding user response：

If I'm understanding your question correctly, you want to render an about page with conditional children, and uncondtionally (or conditionally but separate from the route/path) a footer.

Assuming AppToolBar is rendering an Outlet for nested "/" children routes, continue the abstraction by having the "/AboutMe" route render an Outlet for its nested children routes. Render the Footer with AboutMe wrapper component.

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

If you are wanting to conditionally render the Footer then render conditionally.

Example:

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

You could clean this up a bit by abstracting the JSX into a new wrapper component:

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

...

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

Or abstract the footer into the AboutMe component.

Example:

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>