Basic example structure

app/routes.ts

@@ -1,3 +1,4 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default flatRoutes() satisfies RouteConfig;

app/routes/$qrcode._index.tsx

@@ -0,0 +1,10 @@
+import type { Route } from "./+types/$qrcode._index";
+import { Outlet } from "react-router";
+
+export default function QrLandingPage({ params }: Route.LoaderArgs) {
+  return (
+    <div>
+      <div>LANDING LAYOUT: {params.qrcode}</div>
+    </div>
+  );
+}

app/routes/$qrcode.login.tsx

@@ -0,0 +1,5 @@
+import type { Route } from "./+types/$qrcode.login";
+
+export default function QrLoginPage({ params }: Route.LoaderArgs) {
+  return <div>STATUS: {params.qrcode}</div>;
+}

app/routes/$qrcode.status.tsx

@@ -0,0 +1,5 @@
+import type { Route } from "./+types/$qrcode.status";
+
+export default function QrStatusPage({ params }: Route.LoaderArgs) {
+  return <div>STATUS: {params.qrcode}</div>;
+}

app/routes/$qrcode.tsx

@@ -0,0 +1,11 @@
+import type { Route } from "./+types/$qrcode";
+import { Outlet } from "react-router";
+
+export default function Qrlayout({ params }: Route.LoaderArgs) {
+  return (
+    <div>
+      <div>LAYOUT FOR: {params.qrcode}</div>
+      <Outlet/>
+    </div>
+  );
+}

app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type { Route } from "./+types/home";
+import type { Route } from "./+types/_index";
 
 export function meta(_obj: Route.MetaArgs) {
   return [
@@ -7,7 +7,7 @@ export function meta(_obj: Route.MetaArgs) {
   ];
 }
 
-export default function Home() {
+export default function Homepage() {
   return (
     <div>
       <h1>Demo Charge.re</h1>