使用條件渲染時，react-router-dom 中的默認路由不起作用

Question

我有以下反應組件：

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沒有結果。 當我刪除所有路由，有條件地渲染時，它起作用了。 這可能是原因以及如何避免這種行為？

我的 react-router-dom 版本：

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

Answer 1

我認為您可以刪除 path='*' 並將組件直接放入<Route>

它會是這樣的：

   <Route>
      <Error404Page />
   </Route>

因為 Switch 將嘗試匹配每條路徑，如果找不到任何路徑，則將使用最后一條