如何在 react-router-dom 中创建条件路由？

Question

I am making an application using react-router-dom for redirections, I have wrapped all the <Routes> inside of a container (which is given by Material UI), now, I want my home page to be outside of container (as I want to display a hero image and wrapping it inside of the container brings unnecessary padding from sides, which I don't really want ). But, I want to keep all the other inside of the container.

I am using react-router-dom v6.

inside of my App.tsx function -

function App() {

return (

// I want this page (i.e PageH) not be wrapped around the (container - from MUI)
<Routes>
<Route exact path = '/pageH' component = {PageH} />
</Routes>

 <Container maxWidth = {'lg'} > //from MUI (only want below pages within container)
   <Routes>
     <Route path='/' element={PageA} /> //home page path - default
     <Route path='/pageB' element= {<PageB />} />
     <Route path='/pageC' element={<PageC />} />
     <Route path='/pageD' element={<PageD />} />
     <Route path='/pageE' element={<PageE />} />
     <Route path = '*' element = {<NotFound />} />
</Routes>
 </Container>
 )};

export default App;

Now here, as you can see I have created 2

<Routes>
<Route ... > // to pageH
</Routes>

<Routes> // to other pages
<Container>
<Route ... > 
<Route ... >
</Container>
...
</Routes>

wrappers where first wrapper renders those pages where I don't want a container, and second wrapper rendering the rest of application pages where I need a container wrapper around.

The functionality I implemented is working fine, but the problem is ( on those pages which are inside of my first Routes wrapper, the <NotFoundPage /> is also getting rendered within those pages).

How to separate my NotFound, page from each one of the page, and only render when none of the pages, either from <Routes /> for 1st group or <Routes /> for second group doesn't matches?

An answer to this would also clear all the doubts of making hero images to those pages which are indeed inside of the container, but just for that particular page, the container wrapper needs to get removed.

One alternate way is to make every component separately be wrapped inside of the container, but that would increase unnecessary lines of code and a lot of a work...

I want to implement a logic at the root level only (ie my App.tsx component, where routes to all my other components exits.)

All Suggestions are welcome: )

Answer 1

Create layout routes/components for the routes that need a different UI container to be rendered into. Layout route components render an Outlet for nested routes to render their content into.

Example:

import { Routes, Route, Outlet } from 'react-router-dom';

const Layout = () => (
  <Container maxWidth="lg">
    <Outlet />
  </Container>
);

function App() {
  return (
    <Routes>
      <Route path="/pageH" element={<PageH />} />
      <Route element={<Layout />}>
        <Route path="/" element={<PageA />} />
        <Route path="/pageB" element={<PageB />} />
        <Route path="/pageC" element={<PageC />} />
        <Route path="/pageD" element={<PageD />} />
        <Route path="/pageE" element={<PageE />} />
        <Route path="*" element={<NotFound />} />
      </Route
    </Routes>
  );
};