Route structure for Match Modal

app/components/tournament/EliminationBracketMatch.tsx

@@ -33,7 +33,10 @@ export function EliminationBracketMatch({
 
     if (hasBothParticipants)
       return (
-        <Link className="tournament-bracket__match__link" to="/">
+        <Link
+          className="tournament-bracket__match__link"
+          to={`match/${match.id}`}
+        >
           {children}
         </Link>
       );

app/routes/to/$organization.$tournament/bracket.$id.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderFunction } from "remix";
+import { LinksFunction, LoaderFunction, Outlet } from "remix";
 import { ActionFunction, json, useMatches } from "remix";
 import invariant from "tiny-invariant";
 import { z } from "zod";
@@ -133,6 +133,7 @@ export default function BracketTabWrapper() {
 
   return (
     <div className="tournament-bracket__container">
+      <Outlet />
       <BracketActions data={data} />
       <EliminationBracket
         rounds={data.rounds.filter((round) => round.side === "winners")}

app/routes/to/$organization.$tournament/bracket.$id/match.$id.tsx

@@ -0,0 +1,3 @@
+export default function MatchModal() {
+  return <div>helou</div>;
+}