T
TanStack•14mo ago
equal-aqua

Route masking with file based routing

Hi guys, I'm trying to implement a route mask for one of my routes, but I cannot find if it's even possible with file based routing. The documentation and the example app are both for code based routing, and there's no mention if it's possible or not. Thanks for the answers!
1 Reply
xenial-black
xenial-black•11mo ago
made it work bu can't do the modal on top of the currect route effect 
// /list

import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/list/")({
  component: () => {
    return (
      <div className="flex h-full min-h-screen w-full items-center justify-center gap-2">
        <ul className="flex justify-center items-center flex-wrap gap-5">
          {Array.from({ length: 10 }).map((_, i) => (
            <Link 
            className=" w-[30%] flex-grow bg-base-300 text-primary hover:brightness-110 p-5 rounded-lg" 
            to="/list/$item/item-modal" 
            params={{ item: `${i}` }}>
              item {i}
            </Link>
          ))}
          <li></li>
        </ul>
      </div>
    );
  },
});
// /list

import { createFileRoute, Link } from "@tanstack/react-router";

export const Route = createFileRoute("/list/")({
  component: () => {
    return (
      <div className="flex h-full min-h-screen w-full items-center justify-center gap-2">
        <ul className="flex justify-center items-center flex-wrap gap-5">
          {Array.from({ length: 10 }).map((_, i) => (
            <Link 
            className=" w-[30%] flex-grow bg-base-300 text-primary hover:brightness-110 p-5 rounded-lg" 
            to="/list/$item/item-modal" 
            params={{ item: `${i}` }}>
              item {i}
            </Link>
          ))}
          <li></li>
        </ul>
      </div>
    );
  },
});

Did you find this page helpful?