#TanStack Router

Modern and scalable routing for React applications.

ReactLynx supports both Memory Routing and File-Based Routing, where Memory Routing is required due to browser History API limitations in Lynx, and File-Based Routing is enabled through seamless @tanstack/router-plugin/rspack integration in Rspeedy.

#Installation

Install dependencies:

npm install @tanstack/react-router url-search-params-polyfill

yarn add @tanstack/react-router url-search-params-polyfill

pnpm add @tanstack/react-router url-search-params-polyfill

bun add @tanstack/react-router url-search-params-polyfill

deno add npm:@tanstack/react-router npm:url-search-params-polyfill

Install devDependencies:

npm install @tanstack/router-plugin -D

yarn add @tanstack/router-plugin -D

pnpm add @tanstack/router-plugin -D

bun add @tanstack/router-plugin -D

deno add npm:@tanstack/router-plugin -D

#Project Configuration

• File-based Routing: Enabled via @tanstack/router-plugin/rspack for seamless routing integration.
• React 18 API Compatibility: Use @lynx-js/react/compat to ensure third-party libraries work correctly.

import { defineConfig } from '@lynx-js/rspeedy';
import { tanstackRouter } from '@tanstack/router-plugin/rspack';
import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);

export default defineConfig({
  // ...other configs
  source: {
    alias: {
      react$: require.resolve('@lynx-js/react/compat'),
    },
  },
  tools: {
    rspack: {
      plugins: [
        tanstackRouter({
          target: 'react',
        }),
      ],
    },
  },
});

#Router Configuration

In the Lynx environment, the document is undefined, causing the router to incorrectly identify it as isServer: true. You need to explicitly set isServer: false to ensure proper rendering.

Additionally, Memory Routing is required due to browser History API limitations in Lynx.

import {
  createMemoryHistory,
  createRouter,
  RouterProvider,
} from '@tanstack/react-router';

import { routeTree } from './routeTree.gen.js';

const memoryHistory = createMemoryHistory({
  initialEntries: ['/'],
});

const router = createRouter({
  routeTree,
  history: memoryHistory,
  isServer: false,
});

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

#Polyfill

To ensure URLSearchParams API works correctly in the Lynx environment, add url-search-params-polyfill at the top of your entry file:

import 'url-search-params-polyfill';

import { root } from '@lynx-js/react';
import { App } from './App.jsx';

root.render(<App />);

#File-Based

TanStack Router supports file-based routing where your file structure defines your routes. Place your route components in the src/routes directory, with __root.tsx serving as the root component.

import { createRootRoute, Outlet } from '@tanstack/react-router';

export const Route = createRootRoute({
  component: () => (
    <view>
      <Outlet />
    </view>
  ),
});

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
  component: () => <view>Index Page</view>,
});

The @tanstack/router-plugin/rspack automatically scans the src/routes directory and generates a routeTree.gen.ts file that contains all the route definitions and type information. This generated file includes:

• Route imports and configurations
• TypeScript interfaces for type-safe routing
• The complete route tree structure

See TanStack File-Based Routing for more details.

#Example

tanstack-routersrc/App.tsx

Code

Preview