How to Route A Modal with React Router v6.4 or v6.23.1

[Emmanuel-Xs]

Hi everyone,

I'm trying to implement a modal in my React application using React Router v6.4 (or v6.23.1). My goal is to have a modal that can be navigated to via a specific route (e.g., /register) without disrupting the main layout of the page.

Here’s a brief overview of my setup:
Router Setup:

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
} from "react-router-dom";
import {
  About,
  Home,
  MainLayout,
  NotFound,
  Root,
  Shops,
  Unauthorized,
  Shop,
  ProductDetail,
  SignUp,
} from ".";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />} errorElement={<NotFound />}>
      <Route element={<MainLayout />}>
        <Route index element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/shops">
          <Route index element={<Shops />} />
          <Route path="/shops/:shop" element={<Shop />} />
        </Route>
        <Route path="/product/:id" element={<ProductDetail />} />
        <Route path="/register" element={<SignUp />} />
        <Route path="/unauthorized" element={<Unauthorized />} />
      </Route>
    </Route>,
  ),
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

SignUp Component

import { Modal } from "../../ui/modal";
import { Button } from "../../../components/ui/button";
import { Container } from "../../ui/container";
import { useNavigate } from "react-router-dom";
import { useToggle } from "@uidotdev/usehooks";

export const SignUp = () => {
  const [isModalOpen, toggleModal] = useToggle(false);

  const navigate = useNavigate();

  const handleOnClose = () => {
    toggleModal(false);
    navigate(-1);
  };
  return isModalOpen ? (
    <Modal
      open={isModalOpen}
      onClose={handleOnClose}
      className="max-h-[100svh] min-h-full w-full max-w-[100svw] lg:max-h-[895px] lg:min-h-[25%] lg:w-[85%] lg:max-w-[1235px]"
    >
      <Container className="my-10 flex px-10">
        <form action="" className="flex w-full flex-col gap-2">
         //... form inputs
          <Button onClick={handleOnClose} className="">
            Close
          </Button>
        </form>
      </Container>
    </Modal>
  ) : null;
};

Root Route

import { Outlet } from "react-router-dom";

export function Root() {
  return (
    <>
      <Outlet />
    </>
  );
}

MainLayout.jsx

import { Header } from "../components/Header";
import Footer from "../components/Footer";
import { Outlet } from "react-router-dom";

export function MainLayout() {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
}

What I’ve Tried:
I have scoured through the internet for howto's but couldn't find a good solution for this problem
I would appreciate any guidance or suggestions on how to properly route a modal in React Router v6.4 or v6.23.1. Thank you!