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 out dated. How do I configure the basename in framework mode?

Answer

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

See Read more 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;