react v5.2 中的条件路由

如何解决react v5.2 中的条件路由

我的路由器设置如下：

  return (
    <Router history={history}>
      <Switch>
        <Route exact path="/" component={SearchPage} />
        <Route path="/search" component={SearchPage} />
        <Route path="/searchResults" component={SearchResultsPage} />
        <Route path="/SearchResultsDetails" component={SearchResultsDetailsPage} />
        <Route path="/eventDetails/:ID/:Type" component={EventDetailsPage} />
        <Route path="/approver" component={ApproverPage} />
        <Route component={PageNotFound} />
      </Switch>
    </Router>
  );

现在我需要根据作为道具传递的 hasAccess 变量来限制用户路由。

我已经实现如下：

   return (
    <Router history={history}>
      <Switch>

        { !isAuthenticated ?
          <Route component={UnAuthorizedAccess} /> : null
        }

        { hasSearchAccess ?
          <>
            <Route exact path="/" component={SearchPage} />
            <Route path="/search" component={SearchPage} />
            <Route path="/searchResults" component={SearchResultsPage} />
            <Route path="/SearchResultsDetails" component={SearchResultsDetailsPage} />
          </> : <Route component={UnAuthorizedAccess} />
        }

{ hasEventAccess ? 

<Route path="/eventDetails/:ID/:Type" component={EventDetailsPage} /> : 
<Route component={UnAuthorizedAccess}}

}

        { hasApproverAccess ? 
          <Route path="/approver" component={ApproverPage} /> : <Route component={UnAuthorizedAccess}
         }

        <Route component={PageNotFound} />
      </Switch>
    </Router>
  );

问题：当我搜索 /someRandomPageNotFound 时，它不会将我带到 pageNotFound ，而是显示一个空白页面。 hasEventAccess 和 hasApproverAccess 相同，它显示一个空白屏幕..

我期待它评估其他条件并呈现适当的页面，但看起来没有。怎么解决。

解决方法

我通过 - 检查请求的路线，然后检查用户是否有权访问该路线来实现该功能：

<Route path="/search">
          {hasSearchAccess?
            <Route component={SearchPage} />
            : null}
        </Route>

 <Route path="/approve">
          {hasApproverAccess ?
            <Route path="/approve" component={ApproverPage} /> :
            null}
        </Route>
 <Route path="/*">
      {
          !hasSearchAccess||
          !hasApproverAccess ?
         <Route component={UnAuthorizedAccess} /> : 
         <Route component={PageNotFound} />
      }
    </Route>