What Is the Frontend Routing Solution in OpenSEO? TanStack React Router Explained

OpenSEO uses TanStack React Router as its frontend routing solution, implementing a type-safe, code-generated routing system with automatic route tree generation and advanced features like scroll restoration and intent-based preloading.

OpenSEO is an open-source SEO management platform built with modern React architecture. Its frontend routing solution leverages the latest iteration of React Router to handle navigation, code splitting, and performance optimization across the web interface. The implementation emphasizes type safety and developer experience through automated route generation.

TanStack React Router as the Core Engine

The frontend routing solution in OpenSEO relies on TanStack React Router (formerly React Router), declared as a direct dependency in web/package.json【/cache/repos/github.com/every-app/open-seo/main/web/package.json#L21-L22】. This routing library provides declarative navigation, automatic route preloading, and first-class TypeScript integration that eliminates runtime navigation errors.

Router Instantiation and Configuration

The router is instantiated in web/src/router.tsx using the createRouter function from @tanstack/react-router【/cache/repos/github.com/every-app/open-seo/main/web/src/router.tsx#L1-L7】. This configuration file wires the auto-generated route tree to the application, setting global behaviors for error handling and scroll management.

import { createRouter as createTanStackRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
import { NotFound } from '@/components/not-found';

export function getRouter() {
  return createTanStackRouter({
    routeTree,
    defaultPreload: 'intent',
    scrollRestoration: true,
    defaultNotFoundComponent: NotFound,
  });
}

Source: web/src/router.tsx【/cache/repos/github.com/every-app/open-seo/main/web/src/router.tsx#L1-L12】

Automated Route Tree Generation

Rather than maintaining manual route definitions, OpenSEO leverages TanStack Router's code generation capabilities. The routeTree.gen.ts file is auto-generated during the build process, importing route components from web/src/routes/ and constructing the hierarchical route tree【/cache/repos/github.com/every-app/open-seo/main/web/src/routeTree.gen.ts#L7-L14】【/cache/repos/github.com/every-app/open-seo/main/web/src/routeTree.gen.ts#L59-L70】.

/* This file is auto‑generated by TanStack Router */
import { Route as PrivacyRouteImport } from './routes/privacy';

const PrivacyRoute = PrivacyRouteImport.update({
  id: '/privacy',
  path: '/privacy',
  getParentRoute: () => rootRouteImport,
} as any);

Source: web/src/routeTree.gen.ts【/cache/repos/github.com/every-app/open-seo/main/web/src/routeTree.gen.ts#L11-L14】【/cache/repos/github.com/every-app/open-seo/main/web/src/routeTree.gen.ts#L59-L66】

Integrating the Router into the React Application

To activate the frontend routing solution throughout the component tree, OpenSEO wraps the application with the RouterProvider from TanStack React Router. This pattern injects the configured router instance into the React context, enabling declarative navigation hooks and route-level data loading across all pages.

import { RouterProvider } from '@tanstack/react-router';
import { getRouter } from './router';

const router = getRouter();

function App() {
  return <RouterProvider router={router} />;
}

This integration ensures that every component in the tree can access type-safe navigation methods, route parameters, and loading states managed by the TanStack router.

Key Architectural Capabilities

The TanStack React Router implementation provides several critical advantages for OpenSEO's architecture:

• Type Safety: The code-generated route tree provides full end-to-end type safety, preventing invalid route navigation at compile time.
• Intent-Based Preloading: The defaultPreload: 'intent' configuration instructs the router to preload route chunks when users hover over links, reducing perceived navigation latency.
• Scroll Restoration: Native scroll position management is enabled via scrollRestoration: true, ensuring users return to their previous scroll position when navigating backward.
• Consistent Error Handling: The defaultNotFoundComponent prop provides a centralized 404 fallback component defined in @/components/not-found.

Summary

• OpenSEO's frontend routing solution is TanStack React Router, configured centrally in web/src/router.tsx.
• Routes are automatically generated from files in web/src/routes/ into web/src/routeTree.gen.ts, eliminating manual route configuration.
• The implementation provides type-safe navigation, intent-based preloading, and automatic scroll restoration.
• The RouterProvider component activates the router throughout the React component tree, enabling declarative navigation across the application.

Frequently Asked Questions

Does OpenSEO use React Router or TanStack Router?

OpenSEO uses TanStack React Router, which represents the modern evolution of the original React Router library. According to the source code analysis of web/package.json, the project explicitly depends on @tanstack/react-router rather than the legacy react-router-dom package, providing access to the latest type-safe APIs and code generation features.

How are routes defined in the OpenSEO codebase?

Routes follow a file-based routing convention where React components in web/src/routes/ (such as privacy.tsx) are automatically processed into a type-safe route tree. The routeTree.gen.ts file imports these components and constructs the routing hierarchy during the build process, creating a declarative mapping between URL paths and page components.

What advanced routing features does OpenSEO implement?

The frontend routing solution includes intent-based preloading (defaultPreload: 'intent'), which asynchronously loads route chunks when users hover over navigation links, and scroll restoration to maintain accurate page positions during back-and-forward navigation. The router also implements a default 404 component for unmatched routes and supports route-level error boundaries.

Where is the router configuration located in OpenSEO?

The main router configuration resides in web/src/router.tsx, where the createRouter function instantiates the TanStack router with the generated routeTree. This file defines global router behaviors including preloading strategies, scroll restoration settings, and the default error handling component, while individual page components are co-located in the web/src/routes/ directory.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}