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

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

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 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;

Related Articles