Angular 14 маршрутизирует любой маршрут, который ниже маршрута параметров (т.е.: id), не может маршрутизировать

Мой app-routing.module.ts содержит маршруты параметров, которые ведут к отдельному идентификатору. Я обнаружил, что мой путь с подстановочными знаками был сломан во время тестирования моих маршрутов.

После серьезного тестирования оказалось, что использование другого маршрута ниже пути параметра также не работает.

app-routing.module.ts (исходная установка)

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: () =>
      import('./features/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'about',
    loadChildren: () =>
      import('./features/about/about.module').then((m) => m.AboutModule),
  },
  {
    path: 'contact',
    loadChildren: () =>
      import('./features/contact/contact.module').then((m) => m.ContactModule),
  },
  {
    path: ':id',
    loadChildren: () =>
      import('./features/profile/profile.module').then(
        (m) => m.ProfileModule
      ),
  },
   // PATH BELOW NOT WORKING 👇
  {
    path: '**',
    redirectTo: '',
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabledBlocking',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

app-routing.module.ts (тестирование путем замены некоторых настроек пути)

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: () =>
      import('./features/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: ':id',
    loadChildren: () =>
      import('./features/profile/profile.module').then(
        (m) => m.ProfileModule
      ),
  },
   // PATH BELOW NOT WORKING 👇
  {
    path: 'about',
    loadChildren: () =>
      import('./features/about/about.module').then((m) => m.AboutModule),
  },
  {
    path: 'contact',
    loadChildren: () =>
      import('./features/contact/contact.module').then((m) => m.ContactModule),
  },
  {
    path: '**',
    redirectTo: '',
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabledBlocking',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Идентификатор пути Parma не ограничен числом. Он будет соответствовать всему, что не содержит /. Если вы хотите сопоставить только число, используйте сопоставитель с пользовательской логикой. Но я бы посоветовал использовать префикс типа profile/:profileID

Akxe 17.10.2022 11:10

@Akxe Я пытался использовать сопоставитель, но у меня возникли проблемы с дочерними маршрутами. Но почему это плохая практика?

syahiruddin 18.10.2022 02:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
78
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, маршрут redirectTo должен содержать свойство pathMatch, иначе он не будет маршрутизироваться (даже не должен компилироваться)

Далее, это плохая практика — предоставлять маршруты на одном уровне, например

/home/about
/home/contact
/home/:id

Технически это работает, а потому что зависит от порядка предоставленных маршрутов. если ваш :id маршрут установлен первым в списке, то about и contact тоже становятся идентификаторами.

Поэтому лучшим решением было бы просто разделить маршруты вот так

/home/about
/home/contact
/home/items/:id

В противном случае вы можете использовать защиту canMatch (например, canActivate), но опять же, я бы посчитал это плохой практикой. Просто следуйте RESTFul-подобной структуре для ваших маршрутов, это лучший и самый простой вариант.

Привет, спасибо за ответ! Но как бы вы создали что-то вроде веб-сайта с персонализированным кратким URL-адресом, например, Instagram.com/foo.

syahiruddin 17.10.2022 11:45

@syahiruddin Я бы сделал instagram.com/users/foo

MGX 17.10.2022 12:50

Я прочитал документацию Angular по маршрутизации с urlmatcher angular.io/guide/routing-with-urlmatcher можно с уверенностью сказать, что если я хочу установить имя пользователя/идентификатор в качестве пути, я могу использовать сопоставление URL?

syahiruddin 17.10.2022 15:21

Я бы предпочел использовать защиту canMatch, но на ваше усмотрение!

MGX 17.10.2022 19:40

Извините, только одна последняя вещь, чтобы лучше понять это. Вы упомянули, что это плохая практика, не могли бы вы уточнить, почему это плохая практика, или направить меня к статье об этом, чтобы я мог узнать? Спасибо!

syahiruddin 18.10.2022 03:17

У меня их нет, так как это только личное мнение. Но рассуждение таково: если вы полагаетесь на порядок массива (который очень нестабилен) для того, чтобы что-то работало так, как вы этого хотите, то, вероятно, это не то, что вы хотите делать. Если кто-то зайдет, не знаю, и добавит новый элемент в массив не в то место, он сломает все приложение.

MGX 18.10.2022 09:06

Я понимаю! это имеет смысл с точки зрения повторного использования и масштабируемости. Тратить твое время!

syahiruddin 18.10.2022 13:11

Другие вопросы по теме