How to use TanStack Router when the app is not running in the root directory of a web server?

[jtuchel]

Hi everyone,

I have a "regular" React + Vite + TanStack Router app. To generate relative paths, my Vite app has the configuration base: './'. The TanStack Router itself has no specific configuration.

When I run the app in the root directory of a web server, everything works fine. However, when I deploy it to a subdirectory like /company/tool on an Apache server, the app loads, but the TanStack Router shows a 404 error, saying the page cannot be found.

I assume I need to set the correct base path ( https://tanstack.com/router/v1/docs/framework/react/api/router/RouterOptionsType#basepath-property ), but I have tried several options, and none seem to work.

Here is a sandbox: https://stackblitz.com/edit/vitejs-vite-cakytccn. You can also test this locally. I have also set up a Docker Compose configuration with an Apache server :slight_smile:

Can anyone tell me how to configure the router so it works for all subdirectories?

---

Edit: It works with const router = createRouter({ routeTree, basepath: "/company/tool" }); but this looks bad I guess? Because now I always have to deploy the app under this base path...