Remix JSON 路由

remix-json-routes 是一个允许你从自定义 JSON 结构定义 Remix 路由的包，而不是（或除了）内置的文件路由约定。

安装

npm install remix-json-routes

使用 JSON 路由

查看 examples/ 中的示例应用。

您可以通过 remix.config.js 中的 routes 函数利用此包。jsonRoutes 的第二个参数是一个路由数组，类似于你传递给 React Router 中 createBrowserRouter 的内容，你在其中定义路由路径信息（path、index、children），但不是指定 element/action/loader/等，而是指定指向导出这些方面的 Remix 路由文件的 file 路径。

const { jsonRoutes } = require("remix-json-routes");

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  // Note this ignores everything in routes/ giving you complete control over
  // your routes.  If you want to define routes in addition to what's in routes/,
  // change this to "ignoredRouteFiles": ["**/.*"].
  ignoredRouteFiles: ["**/*"],
  routes(defineRoutes) {
    return jsonRoutes(defineRoutes, [
      {
        path: "/",
        file: "routes/layout.tsx",
        children: [
          {
            index: true,
            file: "routes/some/path/to/home.tsx",
          },
          {
            path: "about",
            file: "routes/some/path/to/about.tsx",
          },
        ],
      },
    ]);
  },
};

使用 JSX 路由

查看 examples/ 中的示例应用。

remix.config.js 本身不支持 JSX，但通过一个小的预构建步骤，你也可以用 JSX 定义你的路由。最简单的方法是将你的 JSX 路由定义放在一个 route.jsx 文件中，并在预构建步骤中将其编译成 routes.js 文件，然后你可以从 remix.config.js 中 require 它。

创建你的 routes.jsx 文件

此文件应使用 remix-json-routes 中的 Route 组件导出你的 JSX 树。

const React = require("react");
const { Route } = require("remix-json-routes");

module.exports = (
  <Route path="/" file="routes/layout.tsx">
    <Route index file="routes/some/path/to/home.tsx" />
    <Route path="about" file="routes/testsome/path/to/about.tsx" />
  </Route>
);

创建一个预构建步骤来构建 routes.js

在 package.json 中添加一个 jsxroutes 脚本，它将 routes.jsx 编译成 routes.js，然后添加 prebuild/predev 脚本，以便我们在 npm run build/npm run dev 之前始终构建一个新的 routes.js 版本。

{
  "scripts": {
    "jsxroutes": "esbuild routes.jsx --format=cjs --outfile=routes.js",
    "prebuild": "npm run jsxroutes",
    "predev": "npm run jsxroutes",
    "build": "remix build",
    "dev": "remix dev",
    "...": "..."
  }
}

注意 你可能也需要将 routes.js 添加到你的 .gitignore 文件中。

编辑你的 remix.config.js 以使用 jsxRoutes

// remix.config.js
const { jsxRoutes } = require("remix-json-routes");
const routes = require("./routes");

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/*"],
  routes(defineRoute) {
    return jsxRoutes(defineRoute, routes);
  },
};