使用 defineRoutes 自定义路由

Question

有人知道 remix.config 中关于 defineRoutes 函数的额外信息吗？

我有这条路线：

{     
"id": "routes/__main/city/$city", "path": "/city/:city",
"file":"routes/__main/city/$city.tsx"
}

在 defineRoutes 中我做了这样的事情：

routes: async (defineRoutes) => {
    return defineRoutes((route) => {
      route("/citta/:city", "routes/__main/city/$city.tsx"); 
    });
  },

我希望 /citta/test 和 /city/test 都在同一个文件中 routes/__main/city/$city.tsx。

但是当我运行代码只有 /citta/test 路由处于活动状态时，另一个 /city/test 将抛出错误。

正如我在此处 https://remix.run/docs/en/v1/api/conventions#routes 中阅读的文档，我想要实现的目标应该是可能的。

我是不是误解了 defineRoutes 的用法？

Answer 1

不用defineRoutes也可以解决这个问题。还原您的 remix.config 更改，让 Remix 为您处理路由，方法是将您的路由放在 app/routes.

内

在您的 app 目录中移动 routes/__main/city/$city.tsx 并添加一个额外的文件夹结构 app/routes/__main/citta/$city.tsx。所以你有两个文件夹 /city 和 /citta 彼此相邻。他们将共享您使用 __main.

引入的所有嵌套路由

从您的 app/routes/__main/citta/$city.tsx 文件中导出以下内容：

import CityComponent from '~/routes/__main/city/$city';

// re-export loader, action, and all other functionality
export * from '~/routes/__main/city/$city'
// re-use the default export from your other route
export default CityComponent;

这样您就可以在 citta/$city.tsx 中重用 city/$city.tsx 文件中的代码。

注意： 确保在 citta/ 和 city/ $city.tsx 中命名两个文件以避免命名差异。否则您重新导出的加载程序和操作将无法工作，因为参数名称不同。

使用 defineRoutes 自定义路由

Custom routes with defineRoutes

reactjs

remix.run