TanStack Router 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00347/article/details/141081726

TanStack Router 使用教程

routerTanStack/router: TanStack Router（前身为React Training的React Router）是一个强大的客户端路由库，适用于构建单页应用（SPA）。它使得React应用能够根据URL的变化来更新视图，实现页面间的无刷新跳转。项目地址:https://gitcode.com/gh_mirrors/ro/router

1. 项目介绍

TanStack Router 是一个强大的、可扩展的路由解决方案，用于JavaScript应用程序，特别是基于React的应用。它提供了灵活的配置选项，支持嵌套路由、动态路由匹配以及浏览器历史管理。通过这个库，开发者可以轻松地在不同组件之间导航，并且实现平滑的页面过渡效果。

2. 项目快速启动

首先确保已经安装了Node.js 和npm。接下来，创建一个新的React项目（如果没有的话）：

npx create-react-app my-app
cd my-app

然后，安装TanStack Router：

npm install @tanstack/router

在src目录下创建AppRouter.js文件，并添加以下基本配置：

import { Route, Link, BrowserRouter } from '@tanstack/react-router';

function AppRouter() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

export default AppRouter;

最后，在src/App.js中引入并渲染AppRouter：

import React from 'react';
import AppRouter from './AppRouter';

function App() {
  return (
    <div className="App">
      <AppRouter />
    </div>
  );
}

export default App;

现在你可以运行你的应用：

npm start

访问 http://localhost:3000 将看到一个简单的导航菜单，点击链接可以在不同的页面间切换。

3. 应用案例和最佳实践

嵌套路由

function AppRouter() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
      <Route path="/" element={<Home />} />
      <Route path="/users" element={<UserList />}>
        <Route path="/users/:userId" element={<UserProfile />} />
      </Route>
    </BrowserRouter>
  );
}

上面的代码展示了如何创建一个嵌套的路由结构，当访问/users/:userId时，将显示对应的用户详情页面。

动态路由参数

在上述例子中，:userId是动态路由参数。可以通过useParams() Hook 在组件内部获取这些值：

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

function UserProfile() {
  const { userId } = useParams();
  // 使用userId查询用户数据...
  return <h2>User Profile: {userId}</h2>;
}