TanStack Router

Modern and scalable routing for React applications

Introduction

INFO

ReactLynx supports both Memory Routing and File-Based Routing:

Lynx requires Memory Routing due to browser history API limitations.
Rspeedy enables seamless @tanstack/router-plugin/rspack integration.

Installation

Install dependencies:

npm

yarn

pnpm

bun

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

Install devDependencies:

npm

yarn

pnpm

bun

npm install @tanstack/router-plugin -D

Config

File-based Routing via @tanstack/router-plugin/rspack.
React 18 API compatibility through alias resolution.

lynx.config.js

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',
        }),
      ],
    },
  },
});

Polyfill

url-search-params-polyfill ensures URLSearchParams API compatibility in Lynx.

index.tsx

import 'url-search-params-polyfill';

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

root.render(<App />);

Example

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.

#TanStack Router

#Introduction

#Installation

#Config