欢迎使用您的新TanStack应用程序！
入门指南
要运行此应用程序，请执行以下操作：
pnpm install
pnpm start生产建筑
要构建此生产应用程序，请执行以下操作：
pnpm build测试
此项目使用 Vitest 用于测试。您可以使用以下命令运行测试：
pnpm test样式
此项目使用 Tailwind CSS 用于造型。
路由
此项目使用 TanStack路由器初始设置是基于文件的路由器。这意味着路由在中作为文件进行管理 src/routes.
添加路线
要在应用程序中添加新路由，只需在 ./src/routes 目录。
TanStack将自动为您生成路由文件的内容。
现在你有两条路线，你可以使用 Link 组件在它们之间导航。
添加链接
要使用SPA（单页应用程序）导航，您需要导入 Link 组件来自 @tanstack/react-router.
import { Link } from "@tanstack/react-router";然后，在JSX的任何地方，你都可以这样使用它：
About
这将创建一个链接，该链接将导航到 /about 路线。
更多关于 Link 组件可以在 链接文档.
使用布局
在基于文件的布线设置中，布局位于 src/routes/__root.tsx。您添加到根路由的任何内容都将显示在所有路由中。路线内容将出现在您使用的JSX中 `` 组件。
以下是一个包含标题的布局示例：
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Link } from "@tanstack/react-router";
export const Route = createRootRoute({
component: () => (
<>
Home
About
),
})这 `` 组件不是必需的，所以如果您不想在布局中使用它，可以将其删除。
有关布局的更多信息，请参阅 布局文件.
数据获取
有多种方法可以在应用程序中获取数据。您可以使用TanStack Query从服务器获取数据。但你也可以使用 loader TanStack Router内置的功能，用于在渲染之前加载路由的数据。
例如：
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/people",
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
return response.json() as Promise;
},
component: () => {
const data = peopleRoute.useLoaderData();
return (
{data.results.map((person) => (
{person.name}
))}
);
},
});加载器大大简化了数据获取逻辑。查看更多信息 装载机文档.
React查询
React Query是路由加载的一个很好的补充或替代方案，将其集成到您的应用程序中很容易。
首先添加您的依赖项：
pnpm add @tanstack/react-query @tanstack/react-query-devtools接下来，我们需要创建一个查询客户端和提供者。我们建议把它们放进去 main.tsx.
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// ...
const queryClient = new QueryClient();
// ...
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
);
}您还可以将TanStack查询开发工具添加到根路由（可选）。
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const rootRoute = createRootRoute({
component: () => (
<>
),
});现在您可以使用 useQuery 获取您的数据。
import { useQuery } from "@tanstack/react-query";
import "./App.css";
function App() {
const { data } = useQuery({
queryKey: ["people"],
queryFn: () =>
fetch("https://swapi.dev/api/people")
.then((res) => res.json())
.then((data) => data.results as { name: string }[]),
initialData: [],
});
return (
{data.map((person) => (
{person.name}
))}
);
}
export default App;您可以在 React查询文档.
状态管理
React应用程序的另一个常见要求是状态管理。React中有很多状态管理选项。TanStack商店为您的项目提供了一个很好的起点。
首先，您需要将TanStack Store添加为依赖项：
pnpm add @tanstack/store现在，让我们在 src/App.tsx 文件作为演示。
import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
import "./App.css";
const countStore = new Store(0);
function App() {
const count = useStore(countStore);
return (
countStore.setState((n) => n + 1)}>
Increment - {count}
);
}
export default App;TanStack Store的众多优秀特性之一是能够从其他状态派生状态。当基础状态更新时，该派生状态将更新。
让我们通过使用派生状态将计数加倍来检查这一点。
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";
const countStore = new Store(0);
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
});
doubledStore.mount();
function App() {
const count = useStore(countStore);
const doubledCount = useStore(doubledStore);
return (
countStore.setState((n) => n + 1)}>
Increment - {count}
Doubled - {doubledCount}
);
}
export default App;我们使用 Derived 类来创建从另一个存储派生的新存储。这 Derived 类有一个 mount 将启动派生存储更新的方法。
一旦我们创建了派生存储，我们就可以在 App 组件，就像我们使用任何其他商店一样 useStore 钩子。
您可以在 TanStack存储文件.
许多的演示文件
前缀为的文件 demo 可以安全地删除。它们为您提供了一个起点，让您可以使用已安装的功能。
了解更多
您可以在 TanStack文档.