React router setup multiple routes files with headers and nested routes

Question

I am currently working on a web project that has two main sections, a showcase site and a user site. In order to differentiate the two different sites, I need to split them into two setup files, each having a specific header. I have seen some solutions involving making an array and mapping it in the main file, however I didn't find any solution with nested routes and components.

The problem is similar to this one except I need to implement nested routes and layout components

Index.js

  <BrowserRouter>
    <Routes>
      {ShowcaseRoute}
      {UserRoute}
    </Routes>
  </BrowserRouter>

Showcase Route

export default function ShowcaseRoute () {
  
  const Layout = () => {
    return (
      <>
        <Header />
        <Outlet />
        <Footer />
      </>);
  }

  return (
    <Route element={<Layout />}>
      <Route index path="/" element={<Home />}/>
      <Route path='/about' element={<About />} />
      <Route path='/contact' element={<Contact />} />
    </Route>
  );
}

User Route

export default function UserRoute () {
  return (
    <>
      <Route path='/auth'>
        <Route />
      </Route>
      <Route path='/user'>
        <Route />
      </Route>
    </>
  );
}

(The user route is currently incomplete and the reason for this question)

Answer 1

ShowcaseRoute and UserRoute are both React components. In React they are rendered as JSX, e.g. <ShowcaseRoute /> instead of {ShowcaseRoute}.

Example:

<BrowserRouter>
  <ShowcaseRoute />
  <UserRoute />
</BrowserRouter>

Both ShowcaseRoute and UserRoute are rendering routes so they must wrap the Route components in the Routes component.

Note that I also moved the Layout component declaration out on it's own as it's generally an anti-pattern to declare React components inside other React components as they will be recreated each time the parent component renders/rerenders, resulting in the entire sub-ReactTree being remounted.

const Layout = () => {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
};

export default function ShowcaseRoute() {
  return (
    <Routes> // <-- wrap routes in Routes component
      <Route element={<Layout />}>
        <Route index path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Route>
    </Routes>
  );
}

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

export default function UserRoute() {
  return (
    <Routes> // <-- wrap routes in Routes component
      <Route path="/auth">
        ....
      </Route>
      <Route path="/user">
        ....
      </Route>
    </Routes>
  );
}