使用 React Router 4 进行条件重定向

Question

在我的 React 应用程序中，我有时需要进行条件重定向。

例如，我将用户发送到登录页面，根据用户点击的按钮，我存储一个值sessionStorage并登录用户，这会自动将用户带到主屏幕。

这就是我想要进行条件重定向的地方。例如，如果我存储的值sessionStorage是“basketball”，我想将用户重定向到篮球新闻页面。如果没有存储任何值，我会将用户留在主屏幕上。

我可以处理这个问题，window.location.replace但这会导致页面回发。我宁愿通过加载适当的组件来处理这种重定向 React 方式，而不是执行页面回发。

我可以用 React Router 4 做到这一点吗？

Answer 1

您可以使用该<Redirect>组件并将其包装在条件中：

//...
render() {
    const isBasketBall = sessionStorage.get('something') === 'basketball';
    return (
        {isBasketBall && <Redirect to="/basketball-news" />}
        {!isBasketBall && <Redirect to="/home" />}
    );
}
//...

官方文档有一个关于身份验证工作流程的很好的例子。