生成路由项目 Generouted 使用教程

生成路由项目 Generouted 使用教程

generouted Generated file-based routes for Vite 项目地址: https://gitcode.com/gh_mirrors/ge/generouted

1. 项目介绍

Generouted 是一个基于 Vite 的文件路由生成器，它能够帮助你快速搭建具有文件式路由的客户端应用。该项目支持多种前端框架和路由库，如 React Router、@tanstack/router、@solidjs/router 等，并且提供了类型安全的导航和全局模态等功能。

2. 项目快速启动

环境准备

确保你的系统中已安装 Node.js 和 npm。如果尚未安装，请从官方网站下载并安装。

初始化项目

首先，使用 Vite 初始化一个新的项目：

pnpm create vite my-vite-app -- --template react

安装依赖

进入项目目录，安装 Generouted 以及所需的路由库：

cd my-vite-app
pnpm add @generouted/react-router react-router

配置 Vite

修改 vite.config.ts 文件，引入 Generouted 插件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import generouted from '@generouted/react-router/plugin';

export default defineConfig({
  plugins: [
    react(),
    generouted(),
  ],
});

创建路由

在 src/pages 目录下创建你的路由文件，例如创建一个首页：

// src/pages/index.tsx
export default function Home() {
  return <h1>首页</h1>;
}

启动项目

运行以下命令启动你的 Vite 项目：

pnpm run dev

现在，你应该能在浏览器中看到你的首页。

3. 应用案例和最佳实践

类型安全导航

Generouted 支持类型安全的导航，这意味着你可以使用类型注解来确保导航链接的正确性。具体使用方法请参考官方文档。

全局模态

你可以创建全局模态，这在需要覆盖当前路由内容时非常有用。只需在文件名前加上 + 符号，即可定义一个模态。

// src/pages/+modal.tsx
export default function Modal() {
  return <div>这是一个模态</div>;
}

4. 典型生态项目

Generouted 可以与多个生态系统项目配合使用，例如：

• 使用 @mdx-js/rollup 支持基于文件的 MDX 路由。
• 利用 Vite 插件扩展功能，如 vite-plugin-solid 用于 Solid 框架的集成。

这些生态项目可以帮助你更灵活地构建你的应用程序。

generouted Generated file-based routes for Vite 项目地址: https://gitcode.com/gh_mirrors/ge/generouted