Маршрутизация по умолчанию в Reaction-router-dom не работает, при использовании условного рендеринга

Question

У меня есть следующий компонент React:

function Routes(props) {
  const { role, userId } = props;

  const renderMemberTasksPage = (props) => {
    //Redirects to 404 or not
  };

  const renderTracksPage = (props) => {
     //Redirects to 404 or not
  };

  return (
    <>
      <Switch>
        <Route exact path='/members/:id/tasks' render={renderMemberTasksPage} />
        <Route exact path='/members/:id/tasks/id:open?' render={renderMemberTasksPage} />

        {role === 'admin' && (
          <Route path='/members/new'>
            <NewMember />
          </Route>
        )}

        {(role === 'admin' || role === 'mentor') && (
          <>
            <Route exact path='/'>
              <Redirect to='/members' />
            </Route>
            <Route exact path='/members'>
              <MembersManagerPage />
            </Route>
            <Route exact path='/tasks/'>
              <MemberTasksPage />
            </Route>
            <Route path='/tasks/new'>
              <NewTask />
            </Route>
            <Route exact path='/tasks/id:open?'>
              <MemberTasksPage />
            </Route>
            <Route path='/tasks/id:open/edit'>
              <MemberTasksPage edit />
            </Route>
            <Route path='/members/:id/progress'>
              <MemberProgressPage />
            </Route>
          </>
        )}

        {role === 'member' && (
          <>
            <Route exact path='/'>
              <Redirect to={`/members/${userId}/tasks`} />
            </Route>
            <Route path='/members/:id/tracks' render={renderTracksPage} />
          </>
        )}

        <Route exact path='/404'>
          <Error404Page />
        </Route>

        <Route path='*'>
          <Redirect to='/404' />
        </Route>

      </Switch>
    </>
  );
}

Проще говоря, этот код определяет маршруты в зависимости от текущей роли пользователя. Здесь у меня проблема: роутер по умолчанию * не работает. Различный порядок маршрутов и использование exact в разных комбинациях не дали результатов. Когда я удалил все маршруты, предоставленные условно, это сработало. Может ли это быть причиной и как избежать такого поведения?

Моя версия response-router-dom:

 "react-router-dom": "^5.1.2"

Answer 1

Я думаю, что вы можете удалить путь = '*' и поместить непосредственно компонент внутри <Route>

Это будет примерно так:

   <Route>
      <Error404Page />
   </Route>

, так как коммутатор будет попробуйте найти каждый путь, который будет использован последним, если он не найдет