Provide trailingSlash setting like in Next.js

[rafalp]

I have an app built with Django. Django is popular webframework for Python, which recommends trailing slash as default for its URLs. Also, Django comes with APPEND_SLASH feature where if URL without trailing slash fails to match any routes, Django will append slash to the URL and attempt to see if it then matches any route. If it does, Django will return a redirect for new, valid URL:

If APPEND_SLASH is True and the initial URL doesn’t end with a slash, and it is not found in the URLconf, then a new URL is formed by appending a slash at the end. If this new URL is found in the URLconf, then Django redirects the request to this new URL. Otherwise, the initial URL is processed as usual.

For example, foo.com/bar will be redirected to foo.com/bar/ if you don’t have a valid URL pattern for foo.com/bar but do have a valid pattern for foo.com/bar/.

This behavior is default for Django and thus, it's dominant in Django world.

Everywhere in Remix I see that default is no trailing slash, but I've couldn't find anything on easy way to have it the opposite. In Next.js there's trailingSlash option which description seems to be exactly what I need, but I would like to use Remix in my project.

[kiliman]

Typically if I want a trailing slash, I'll create an index route. So:

users.tsx  (layout route)
users._index.tsx => /users/  (list index)
users.$userId.tsx => /users/:userId (detail)

[rafalp]

Thank you for answering this.

How do I make user detail route also end with trailing slash? Is this for v2?

On side note, I have over 100 URLs in my app. Creating 200 route files doesn't seem like a solution for me.

[kiliman]

I see. Yeah, if you want a trailing slash on ALL your routes, that is not supported out of the box. However, you could override the route convention via remix.config to make all your leaf routes index routes.

Here's how you can convert all leaf routes to index routes

// remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
// import the flatRoutes convention
const { flatRoutes } = require("@remix-run/dev/dist/config/flat-routes.js");
module.exports = {
  // need to ignore all routes since we process it ourselves in routes below
  ignoredRouteFiles: ["**/*"],
  routes: () => {
    // define routes using flatRoutes (v2) convention
    const routes = flatRoutes("app", ["**/.*"]);
    const entries = Object.entries(routes);
    // add index: true to all leaf routes
    entries.forEach(([routeId, route]) => {
      if (route.path) {
        const isLeaf = !entries.some(([, r]) => r.parentId === routeId);
        if (isLeaf) {
          route.index = true;
        }
      }
    });
    return routes;
  },
  serverModuleFormat: "cjs",
  future: {
    v2_errorBoundary: true,
    v2_meta: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
  },
};

<Routes>
  <Route file="root.tsx">
    <Route index file="routes/_index.tsx" />
    <Route path="users" file="routes/users.tsx">
      <Route path=":userId" index file="routes/users.$userId.tsx" />
      <Route index file="routes/users._index.tsx" />
    </Route>
  </Route>
</Routes>

[TimoWestland]

@kiliman How would this work if you alread use defineRoutes for localized routes there?

[kiliman]

You can still call defineRoutes. First, call the default route convention, then call your defineRoutes and merge the two together, then process all your leaf routes.

// remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
// import the flatRoutes convention
const { flatRoutes } = require("@remix-run/dev/dist/config/flat-routes.js");
module.exports = {
  // need to ignore all routes since we process it ourselves in routes below
  ignoredRouteFiles: ["**/*"],
  routes: (defineRoutes) => {
    // define routes using flatRoutes (v2) convention
    let routes = flatRoutes("app", ["**/.*"]);

    // call your defineRoutes here, then merge with previous routes
    let otherRoutes = defineRoutes(...)
    routes = { ...routes, ...otherRoutes }

    // now convert all your leaf routes to index routes
    const entries = Object.entries(routes);
    // add index: true to all leaf routes
    entries.forEach(([routeId, route]) => {
      if (route.path) {
        const isLeaf = !entries.some(([, r]) => r.parentId === routeId);
        if (isLeaf) {
          route.index = true;
        }
      }
    });
    return routes;
  },
};