Пользовательские маршруты с defineRoutes

Question

Есть ли у кого-нибудь дополнительная информация о функции defineRoutes в remix.config?

У меня есть этот маршрут:

      {     
"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.

Шаг routes/__main/city/$city.tsxв твоей appкаталог и добавить дополнительную структуру папок. Итак, у вас есть две папки /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;

Это позволяет повторно использовать код из вашего city/$city.tsxфайл в citta/$city.tsx.

Примечание. Обязательно укажите имена обоих файлов в citta/а также city/ $city.tsxво избежание разночтений в именах. В противном случае ваш повторно экспортированный загрузчик и действие не будут работать, так как имя параметра отличается.

Answer 2

Недавно я попытался разместить весь свой код в модулях и повторно экспортировать компоненты страницы изapp/routesтак:

      import LoginPage,  from "~/modules/auth/LoginPage";
export * from "~/modules/auth/LoginPage";
export default LoginPage;

но я столкнулся с проблемами гидратации React 18. Рабочее решение для меня было реэкспортировать следующим образом:

      import LoginPage, { action, loader } from "~/modules/auth/LoginPage";

export { action, loader };
export default LoginPage;