Shaping layout according to URL in React + React Router Dom

Question

I'm making a small project aiming at reproducing the checkout mechanism of an e-commerce site.

The idea is that upon clicking checkout on the navbar, the Checkout page is mounted, and the Header is removed, but gets back when exiting the checkout page.

For this, I've played on the URL, namely, with a regex checking if the URL contains 'checkout'.

Does anyone know if it's a cannonical way to do the trick or if there is a more accurate way of proceeding ?

I'm using latest version of react-router-dom for this.

here's the code :

for Main.jsx :

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import Errorpage from './ErrorPage.jsx';
import { GeneralContextProvider } from "./GeneralContext.jsx";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Checkout from './Checkout.jsx';

const router = createBrowserRouter([
  {
    path: "/:locale",
    element : <App />,
    errorElement: <Errorpage />,
    children: [
      {
        path: "checkout",
        element: <Checkout/>,
      }
    ]
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <GeneralContextProvider>
    <RouterProvider router={router}/>
  </GeneralContextProvider>
)

for App.jsx

import './App.css'
import Header from './Header'
import { Outlet, useLocation } from 'react-router-dom';

function App() {

  const location  = useLocation()
  const checkoutRegex = /FR\/checkout/

  return (
    <>
      {!checkoutRegex.test(location.pathname) && <Header></Header>}
      <Outlet/>
    </>
  )
}

export default App

for Checkout.jsx

import Sidebar from "./Sidebar"

const Checkout = () => {

    return (
        <>
            <Sidebar></Sidebar>
            <div>hello checkout</div>
        </>
    )
}

export default Checkout