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均未显示结果。当我删除所有路由（有条件地渲染）后，它就起作用了。可能是原因以及如何避免这种行为吗？

我的react-router-dom版本：

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

Answer 1

我认为您可以删除path ='*'并将组件直接放在<Route>

内

会是这样的：

   <Route>
      <Error404Page />
   </Route>

由于Switch会尝试匹配每条路径，因此如果找不到，则会使用最后一条

使用条件渲染时，react-router-dom中的默认路由不起作用

1 个答案: