[SOLVED] How to set basename for react-router v7 framework mode?

How to set basename for react-router v7 framework mode?

I have created a React-Router framework mode app like this:

npx create-react-router@latest my-react-router-app

The version of React-Router is:

"react-router": "^7.5.1"

In routes.ts I have added a bunch of pages:

export default [
  index("routes/login.tsx"),
  route("menu", "routes/menu.tsx"),
  route("skills", "routes/skills.tsx"),
  route("courses", "routes/courses.tsx"),
] satisfies RouteConfig;

Everything is working just fine during development. Now, I need to deploy this app in the "/courses" folder of the web server's document root (I have server side rendering disabled in react-router.config.ts). I cannot find any updated information on how to set the basename to "/courses". Most of the information seems outdated. How do I configure the basename in framework mode?

Solution

You can specify a router basename property in your react-router-config.ts file.

See react-router-config.ts in Special Files and the React-Router Configuration API for details.

react-router.config.ts:

import type { Config } from "@react-router/dev/config";

export default {
  // Other config options...
  basename: "/courses",
} satisfies Config;