Почему React Router не отображает нужный компонент на «*» подстановочном маршруте?

Question

Я использую реагирующий маршрутизатор в моем проекте для обработки различных маршрутов. В моем rout.jsx мне пришлось обрабатывать ошибки 404 и 401. Я написал последующие представления для обоих этих случаев и добавил их в мои маршруты. Теперь дело в том, что я структурировал свой код немного иначе, чем все примеры, найденные в Интернете. Так что теперь ни одна статья не помогла мне до сих пор. Что происходит, так это то, что мое приложение будет отображать страницу с ошибкой 401, даже если она должна отображать страницу с ошибкой 404, когда должен быть введен маршрут, который не определен в моем приложении. Другие маршруты отображаются соответственно. Приложение отлично обрабатывает аутентификацию и показывает страницу 401 для маршрутов, которые находятся вне области видимости для пользователей.

Я покажу некоторый код:

module.exports = {
  SITE_ROUTES,
  mainRoute: (
    <div className={styles.container}>
      <Switch>
        <Route exact path="/login" component={LoginRouteHandler} />
        <Route exact path="/logout" component={LoginRouteHandler} />
        <Route exact path="*" component={AppContainer} />
      </Switch>
    </div>
  )
}

Любой другой маршрут, кроме входа или выхода из системы, обрабатывается моим AppContainer. Мой AppContainer выглядит следующим образом:

const AppContainer = () => (
  <div className={styles.content} >
    <SidebarWithRouter style={{ width: 200 }} />
    <div className={styles.mainContainer} style={{ marginLeft: 200 }}>
      <Switch>
        {SITE_ROUTES.map((route, index) => {
          if (!_.has(route, "accessLevel") || route.accessLevel) {
            return <Route key={index} exact path={route.route} component={route.component} />
          }
          return <Route key={index} component={UnauthorizedAccessRouteHandler} />
        })}
      </Switch>
  </div>
)

Здесь все маршруты, введенные в URL, проверяются с помощью уже определенных маршрутов в моем массиве SITE_ROUTES. Каждый маршрут проверяется для очистки доступа, и если у него нет доступа к этому конкретному маршруту, он получает отрендеренную страницу 401.

Мой массив SITE_ROUTES выглядит следующим образом:

const SITE_ROUTES = [
  {
    route: "/profile",
    component: ProfileRouteHandler,
  },
  {
    route: "/edit_sections",
    component: EditSectionsRouteHandler,
    accessLevel: accessLevel.hasCsLevel1Access()
  },
  {
    route: "*",
    component: PageNotFoundRouteHandler,
  }
]

См. что последняя ставка из массива с route: "*"? Это не работает. Поэтому, когда я посещаю /edit_sections, UnauthorizedAccessRouteHandler отображается, что правильно, потому что у пользователя нет соответствующей очистки. Но когда я ввожу любой случайный путь, например /xyz, вместо рендеринга PageNotFoundRouteHandler он все равно отрисовывает UnauthorizedAccessRouteHandler.

Пожалуйста, если кто-нибудь может мне помочь с этим, я буду очень признателен. Заранее спасибо!