Multiple index routes

[sigginjals]

Hi there 👋

I'm looking into Remix for an upcoming web application. Playing around with the tutorial and reading the docs it looks like the router isn't very flexible. I need to implement multiple index routes (or root routes /), where I need to determine at runtime which route matches, e.g. using the hostname. Is there any support for this currently?

[ryanflorence]

Getting me defensive over here with "not very flexible", the router is incredibly flexible! It just doesn't deal with hostnames, only pathnames.

But you can change your UI based the host by sending the information down from your loader:

export function loader({ request }) {
  let url = new URL(request.url);
  return { hostname: url.hostname }
}

export default function Index() {
  let { hostname } = useLoaderData();
  return hostname === "cheese" ? <Cheese /> : <Beef />
}

[sigginjals]

Thanks for taking the time to answer this Ryan. I sort of figured I could do something like this but what I'm worried about is the chunk size. Since these are runtime checks, there is no way for Remix to do any sort of "smart" code splitting per "index route". I would end up with all of them in a single bundle, right 🤔?

[arvigeus]

If only hostname determines the index route, maybe you can use remix.config.js to define custom routes based on host? Pass host at build time, then use different file to handle it.

[sigginjals]

Wouldn't that require me to build the application for each unique host? So if I have a 100 possible hosts I would have to build the app 100 times?