安装

1. 安装

npx create-react-router@latest my-react-router-app

image-20251119140122408

  1. 该命令会定义项目文件夹名, 并使用默认模板.
  2. 模板下载完成后, 会提示是否初始化 git 仓库.
  3. 然后会提示是否安装依赖包.

注意安装对 node 版本有要求.

如果要制定模板, 可以带上 --template 参数:

npx create-react-router@latest --template remix-run/react-router-templates/<template-name>

image-20251119141527213

然后进入项目文件执行 npm run dev 即可查看运行.

image-20251119141628193

运行时会自动编译生成 .react-router 文件夹, 会生成对应的类型信息. 代码中会有对其引用.

image-20251119141809277

2. 简要说明 minimal 模板

代码的根目录在 app 目录下:

image-20251119142519952

在 tsconfig.json 中可以看到配置了路径 ~/*, 以及根目录: . 和 ./.react-router/types

  • 路径中, 使用 ~/ 可以从 app 目录开始访问源码. 与 Vue3/Vite 模式下的 @/ 别名类似.
  • 根路径 . 用于指引源代码 (实际上就是整个项目).
  • 根路径 ./.react-router/types 是类型文件, 由运行时生成的类型描述.

根据 Vite 配置. 默认使用了 tailwindcss.

3. 部署 (重要)

react 技术栈似乎比较喜欢搞服务端渲染那一套. 注意是首屏服务端渲染, 交互后依旧是在客户端渲染. 用于处理首屏加载与 SEO 等问题. react-router 模板的部署包含两类:

  1. 全栈部署 (SSR 那一套, 使用本地的 node 服务器进行部署)
  2. 静态托管 (SPA 那一套, 使用 nginx 等静态服务器部署)

这个是 SPA 应用的通病, 以前的目的是如此, 今天不明(2025年11月20日)

构建部署使用命令 (默认):

npm run build

会生成一个 build 目录. 里面包含 client 和 server 两个目录:

image-20251120092920715

运行通过 server 目录下的 js 作为入口 (依赖于本地 http 服务):

image-20251120093020621

显然采用的是全栈部署.

如果要使用静态部署:

  1. 找到根目录下的 react-router.config.ts 配置文件.
  2. 设置配置项 ssr 为 false. 就不会生成服务端渲染的代码.

注意, 不能注释掉, 似乎默认就是 true, 必须显式的设置为 false.

image-20251120093426705

然后再执行 npm run build 进行构建. 这时只会得到一个 index.html 文件, 以及一些 js 等资源文件.

image-20251120093619494

然后使用静态 http 服务器部署即可.

Last Updated:
Contributors: jk