ReactLynx logoReactLynx logo
ReactLynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

TanStack Router

现代化且可扩展的 React 应用路由解决方案

介绍

INFO

ReactLynx 支持 Memory Routing 和 File-Based Routing

  • Lynx 由于浏览器 history API 限制需要使用 Memory Routing
  • Rspeedy 支持无缝集成 @tanstack/router-plugin/rspack

安装依赖

安装 dependencies：

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

安装 devDependencies：

npm
yarn
pnpm
bun
npm install @tanstack/router-plugin -D

配置

  1. 通过 @tanstack/router-plugin/rspack 实现 File-based Routing。
  2. 通过 alias 实现 React 18 API 兼容。
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({
  // ...其它的配置
  source: {
    alias: {
      react$: require.resolve('@lynx-js/react/compat'),
    },
  },
  tools: {
    rspack: {
      plugins: [
        tanstackRouter({
          target: 'react',
        }),
      ],
    },
  },
});

Polyfill

url-search-params-polyfill 确保 URLSearchParams API 在 Lynx 中的兼容性。

index.tsx
import 'url-search-params-polyfill';

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

root.render(<App />);

示例

tanstack-routersrc/App.tsx
预览
除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。