如果React中未接受隐私政策协议，请重定向至

Question

我正在尝试找出一种方法，如果隐私策略不被接受，可以将用户从每个受保护的路由重定向到隐私策略页面。目前，我从Redux中的user对象上的一个变量中获取true/false值，并将其传递给每个受保护的路由。如下所示：

const isPrivacyStatementAccepted = useSelector(getIsPrivacyStatementAccepted)

  if (!isPrivacyStatementAccepted) history.push(AuthRoutes.privacyStatement)

有没有更优雅/更有效的方法来做同样的事情？

Answer 1

在添加了路由的地方，您可以使用更好的方法。如下所示：

const isPrivacyStatementAccepted = useSelector(getIsPrivacyStatementAccepted)

<Route exact path="/">
  {isPrivacyStatementAccepted ? <Redirect to={AuthRoutes.privacyStatement} /> : <YourDashbordRoute />}
</Route>

Answer 2

看起来你们已经很接近了。我敢肯定您的受保护的路由组件还有更多的工作要做，但这是通过用于authenticated routes的相同模式来解决的。检查是否满足条件，返回传入指定道具的Route组件，否则返回并呈现Redirect。

const PrivacyStatementProtectedRoute = props => {
  const isPrivacyStatementAccepted = useSelector(getIsPrivacyStatementAccepted);

  return isPrivacyStatementAccepted ? (
    <Route {...props} />
  ) : (
    <Redirect to={AuthRoutes.privacyStatement} />
  );
};

像使用任何其他路径一样使用

<Route path="/about" component={About} />
<Route path="/help" component={Help} />
<PrivacyStatementProtectedRoute path="/account" component={Account} />