Learn Remix

route module

• convention (opens in a new tab)

  export interface ConfigRoute {
    /**
     * The path this route uses to match on the URL pathname.
     */
    path?: string;
   
    /**
     * Should be `true` if it is an index route. This disallows child routes.
     */
    index?: boolean;
   
    /**
     * Should be `true` if the `path` is case-sensitive. Defaults to `false`.
     */
    caseSensitive?: boolean;
   
    /**
     * The unique id for this route, named like its `file` but without the
     * extension. So `app/routes/gists/$username.jsx` will have an `id` of
     * `routes/gists/$username`.
     */
    id: string;
   
    /**
     * The unique `id` for this route's parent route, if there is one.
     */
    parentId?: string;
   
    /**
     * The path to the entry point for this route, relative to
     * `config.appDirectory`.
     */
    file: string;
  }
   
  export interface RouteManifest {
    [routeId: string]: ConfigRoute;
  }

entry points

server entry:

import * as entryServer from "app/server.entry"
export { default as assets } from "./assets.json";
export const entry = { module: entryServer };
export const routes = {
  [id]: {
    id: route.id,
    parentId: route.parentId,
    path: route.path,
    index: route.index,
    caseSensitive: route.caseSensitive,
    module: route${index},
  }
  ...
}

client entry:

let entryPoints = {
  "entry.client": path__namespace.resolve(config.appDirectory, config.entryClientFile)
};
 
for (let id of Object.keys(config.routes)) {
  // All route entry points are virtual modules that will be loaded by the
  // browserEntryPointsPlugin. This allows us to tree-shake server-only code
  // that we don't want to run in the browser (i.e. action & loader).
  entryPoints[id] = path__namespace.resolve(config.appDirectory, config.routes[id].file) + "?browser";
}