使用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" />}
    );
}
//...

官方文档具有nice example的身份验证工作流程。

Answer 2

您也可以执行以下操作，而不是重定向：

{ isBasketBall && this.props.history.push("/basketball-news") }

Answer 3

render() {
    return (
        sessionStorage.get('redirectpath') ? this.props.history.push("/" + sessionStorage.get('redirectpath')) : this.props.history.push("/")
    );
}