前端开发必须了解 React 新的路由 TanStack RouterTanStack Router 已经出来的一段时

TanStack Router 已经出来的一段时间了，社区中有些项目已经开始使用了。例如：full-stack-fastapi-template 的前端部分。

为什么TanStack Router 值得学习呢？

• TanStack Router 结合 Next.js、Remix 等前端和全栈框架的优点。
• 支持文件 Code Base, File Base 路由的两种形式。
• 类型安全强大，这一点很重要
• 其他很多功能

但是我们还是关注他们基本用法。基于 Vite 搭建开发环境

两种模式

React 在路由方面的创新已经非常成熟了：

• 基于代码(Code Base)的路由，
• 基于文件路由(File Base)

在 Next.js 和 Remix 上早已实现。TanStack Router 同时支持这两种方式。同时对各种打包 webpack/rspack, vite 等等工具进行支持。

本文章使用 vite 构建项目

依赖

可以使用 vite 快速创建一个 react 项目，下面是 TanStack Router 的依赖。

pnpm add @tanstack/react-router # 路由
pnpm add @tanstack/router-devtools # 路由开发者工具

Code Base

Code Base 就是路由时以纯代码的形式展现：

• 主文件渲染路由使用 RouterProvider 组件：

import ReactDOM from "react-dom/client";
import { RouterProvider } from "@tanstack/react-router";
import { router } from "./router/index";

const rootElement = document.getElementById("app")!;

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(<RouterProvider router={router} />);
}

router 使用 createRouter 函数创建:

import { aboutRoute } from "./about";
import { createRouter } from "@tanstack/react-router";
import { indexRoute } from "./home";
import { rootRoute } from "./root";

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
export const router = createRouter({ routeTree, defaultPreload: "intent" });

• 定义 root 路由：

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

import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const rootRoute = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

定义 link 导航和 Outlet 展示匹配组件，如何使用过 React Router 他们基本相似。

• 定义路由 home

import { createRoute } from "@tanstack/react-router"
import { rootRoute } from "../root"

export const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: IndexComponent,
})


export function IndexComponent() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  )
}

路由 home 中使用 createRoute 函数定义，配置 getParentRoute 父router, 和path 以及组件即可。

File Base

File Base 与 Code Base 有一些不同，File Base 的路由配置文件是工具生成的。这一点在第一次了解的时候是有点创新的。下面面看看如何使用：

pnpm add @tanstack/router-plugin

@tanstack/router-plugin 目前支持 webpack、rspack以及vite， 当然这里使用 vite

import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), TanStackRouterVite(),],
})

文件路由有自己的格式：

• 在 src/routes目录下，必须与 __root.tsx 文件，我们实现如下：

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

import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{' '}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
        <Link to="/user/$id" params={{ id: '123' }} className="[&.active]:font-bold">
          user
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

• 路由文件实现

文件路由需要使用 createFileRoute 方法传递路由。

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

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  )
}

这个方法调用之后可以配合 @tanstack/router-plugin 插件，在不同的平台，生成一个 routeTree.gen.ts 的路由文件。来看看这个文件的格式：

输出了一个 routeTree 一个对象，以及 TypeScript 类型下面就可以基于这个对象，创建 router 了。后面对接到 Code Base 基本一致。同时这些编译的类型也保证了在编写 TS 时类型安全。

小结

在搞定了初步定义 TanStack Router 路由，之后路由的探索剩下的路由知识点就需要根据具体的业务进行深入了，TanStack Router 有丰富的使用场景。TanStack Router 文件路由路由生成路由配置文件方式还是很有创意的。生成了路由避免了手动书写的烦劳，也减少了错误。