0
185
ViewsHow to add more than one Outlet component react router dom V6?
I'm using react-router-dom V6 and I would like to know if it was possible to add more than one Outlet component at the same time because I want to have one section to be replaceable and a footer
This is what I attempted
<Route path = "/" element={<AppToolBar/>} >
<Route path = "/AboutMe" element={<AboutMe />}>
<Route path="/AboutMe" element={<AboutMeIntro />} />
<Route path="/AboutMe" element={<Footer />} />
</Route>
</Route>
But it doesn't work since it doesn't identify a difference between each other so it will simply render twice the first one only instead of render first one and second one. Any ideas ? Maybe I'm ignoring something important
This is how it renders
UPDATE
Answer definitely did the trick
<Route path = "/" element={<AppToolBar/>} >
<Route path="/AboutMe" element={( <> <AboutMe /> <Footer /> </> )} >
<Route path="/AboutMe" element={<AboutMeIntro />} />
</Route>
</Route>
1 answers
Answer question0
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>