Dynamic route aliases

[grinkus-adapt]

Hi, I'm looking for some help/thoughts.

I'm working on a new version of an ecommerce site where in the old version all URLs were:

• /product-title-that-consists-of-some-words_product-productId.html
• /category-name_category-categoryId.html

^ The product and category URLs have some descriptive text in them, followed by the important bit, which is the keyword _category- or _product- and then the actual ID.

In the new version I'd like to use URLs that are:

• /product/productId
• /category/categoryId

I'd like to handle the old URL structure and then switch to new URL structure after a few months.

My initial thinking was that maybe I could set up a /routes/$sharedCategoryAndProductRoute.tsx and then import all other pages (in this example -- product and category pages), and according to some custom logic export what's needed.

That seems... inelegant, though.

I was thinking that maybe it would be possible to use the routes func in the remix.config.js, but I think this would require regex support or something. I'd need to do something like:

return defineRoutes((routes) => {
  route(/.*_p-(.*)\.html/, `routes/products/$1.tsx`);
  route(/.*_c-(.*)\.html/, `routes/categories/$1.tsx`);
});

But the $1.tsx there doesn't make much sense either...

It's also unclear how to handle dynamic paths, since the routes function handles the path and the filename (i.e. I can handle /product-123 to point to routes/products/$productId.tsx, but there's no way to map the 123 from the path to the $productId.)

Maybe like this:

return defineRoutes((routes) => {
  route(`*_product-:productId:.html`, `routes/products/$productId.tsx`);
  route(`*_category-:categoryId:.html`, `routes/categories/$categoryId.tsx`);
});

Maybe there's a better way?

[kiliman]

Unfortunately, React Router 6+, which Remix uses, no longer supports regex in params.

So your original solution is the correct one. Get the param from your route, and then use a regex to find the productId or categoryId. If present, return redirect to the new route. Otherwise, return 404 response.

// routes/$sharedCategoryAndProductRoute.tsx

const regex = /_product-(?<productId>.+)|_category-(?<categoryId>.+)/;

export function loader({ params }: LoaderArgs) {
  const { sharedCategoryAndProductRoute } = params
  const match = regex.exec(sharedCategoryAndProductRoute);
  if (match) {
    const { productId, categoryId } = match.groups;
    if (productId) {
      return redirect(`/product/${productId}`);
    }
    if (categoryId) {
      return redirect(`/category/${categoryId}`);
    }
  }
  return new Response('Not Found', { status: 404 });
}

[grinkus-adapt]

Thank you for spending time on this.

It's not completely clear to me though.

What about links and 404 handling? Also, wouldn't this mean that all pages would be included in the bundle this way? This seems way too complex, even for two pages, but I'll probably have to handle even more. I was working on this in my codebase so names changed a bit, but it's still the same issue:

// routes/$catchallRoute.tsx

import { useParams } from "@remix-run/react";
import type { LoaderArgs } from "@remix-run/server-runtime";

import ProductPage, {
  links as productLinks,
  loader as productLoader,
} from "~/routes/products/$productId";

import CategoryPage, {
  links as categoryLinks,
  loader as categoryLoader,
} from "~/routes/category/$slug";

const types = {
  c: `category`,
  p: `product`,
  v: `category`,
};

function getRequestType(pathname: string) {
  const matches = pathname.match(/\.*?-([cpv])-(\d*?)\.html/i);
  if (!matches) {
    return [];
  }

  if (!Object.keys(types).includes(matches[1])) {
    return [];
  }

  if (types[matches[1]] && matches[2]) {
    return [types[matches[1]], matches[2]];
  }

  return [];
}

export function links() {
  // How to detect if it's a product or a category here?

  return [...categoryLinks(), ...productLinks()];
}

export function loader(loaderArgs: LoaderArgs) {
  const {
    params: { catchallRoute },
  } = loaderArgs;

  if (!catchallRoute) {
    return new Response(`Not Found`, { status: 404 });
  }

  const [pageType, id] = getRequestType(catchallRoute);

  if (pageType === `product` && typeof id !== undefined) {
    return productLoader({
      ...loaderArgs,
      params: { ...loaderArgs.params, productId: id },
    });
  }

  if (pageType === `category` && typeof id !== undefined) {
    return categoryLoader({
      ...loaderArgs,
      params: { ...loaderArgs.params, slug: `category-${id}` },
    });
  }

  return new Response(`Not Found`, { status: 404 });
}

export default function Page() {
  const { catchallRoute } = useParams();
  if (!catchallRoute) {
    return false;
  }
  const [pageType, id] = getRequestType(catchallRoute);

  if (pageType === `product` && typeof id !== undefined) {
    return ProductPage();
  }

  if (pageType === `category` && typeof id !== undefined) {
    return CategoryPage();
  }

  // Handle 404 somehow? Needs to import the ErrorBoundary from app/root?

  return <p>This is the catchall page</p>;
}

[grinkus-adapt]

Also, wouldn't this mean that all pages would be included in the bundle this way?

I've just checked, and components that are used in the product-page also get loaded when a category-page is visited (/c-categoryId handled by routes/$catchallRoute.tsx), which is definitely not desirable. If I go to the /category/categoryId page (handled by routes/category/$slug.tsx) then the components used in the product-page are not loaded, which is what is expected and that's what I'd like the $catchallRoute page to do too. I do understand that that's not how it works though.

I'm still looking for a way to add dynamic route aliases and it seems that neither using the app/routes/$catchallRoute.tsx nor doing redirects is the answer.

[kiliman]

Unfortunately, you're going to have issues regardless of which solution you choose, since RR at its core doesn't support regex in routes.

It seems like it would be simpler to pick a URL pattern and stick with it. Handle redirects for old URLs.

You can always use lazy imports if you want to minimize bundle size. But if your app is already calling your products/category routes, I don't think it's worth the hassle.

[grinkus-adapt]

Unfortunately, you're going to have issues regardless of which solution you choose

That's what I feared.

Thank you.

[grinkus-adapt]

It seems like it would be simpler to pick a URL pattern and stick with it. Handle redirects for old URLs.

Just for clarity, redirects are not an option for this use-case. I believe I'll have to resort to using redirects, but the ideal scenario would be to host two versions on the same URL and have them behave as A/B variants. Another option I considered was hosting the two versions on separate subdomains while keeping the paths the same to observe the impact on SEO, making minimal changes (thus, retaining the same paths). However, it seems that I'll have to go with different subdomains and different paths, as I haven't been able to find a better way of handling it.

I hope this clarifies the situation for anyone who comes across this discussion in the future 😉