重定向至"如果React不接受隐私政策协议"诊断树

Question

如果隐私政策不被接受，我正试图找到一种方法，将用户从我的每个受保护路由重定向到隐私政策页面。目前，我正在从Redux中用户对象上的一个变量中获取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

看起来你已经很接近了。我相信您的受保护路由组件还有更多的工作要做，但这是用与经过身份验证的路由相同的模式解决的。检查是否满足条件，并返回一个具有指定道具的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} />