examples/react/router-monorepo-simple/README.md
An example demonstrating TanStack Router in a monorepo setup.
To start a new project based on this example, run:
npx gitpick TanStack/router/tree/main/examples/react/router-monorepo-simple router-monorepo-simple
A challenge with TanStack Router in a monorepo setup is that it requires TypeScript type augmentations. However, if you set this up directly in the final app, the links inside the libraries won't be type-safe. To solve this in a monorepo, you need a separate library just for the router, without any components, and then integrate it with the app.
This example showcases this approach using the following packages:
packages/router is the router librarypackages/post-feature is the posts UI librarypackages/app is the appWith this approach, we can use loaders in the router and the feature library without creating circular dependencies.
Since the router library re-exports the router components, importing them in the feature library ensures they remain type-safe, as they’re linked to the TypeScript augmentations.
Finally, in the app, we can create a map of routes to components (packages/app/src/main.tsx), which ties the router to the components. We could enforce lazy loading here, but it was left out for simplicity. With this setup, we now have a fully type-safe router!
Install dependencies:
pnpm install
Start the development server:
pnpm dev
Build for production:
pnpm build
This example demonstrates:
Here is what it looks like in the monorepo:
Due to a limitation on Stackblitz, the example's types are not properly inferred in the IDE, however as soon as you click on fork in the bottom right corner, the types should be correctly inferred.