Условное перенаправление с React Router 4

Question

В моем приложении React мне иногда нужно выполнить условное перенаправление.

Например, я отправляю пользователей на целевую страницу и, в зависимости от нажатия кнопки пользователем, сохраняю значение в sessionStorage и регистрирую пользователя, который автоматически переводит пользователя на домашний экран.

Вот где я хочу сделать условное перенаправление. Например, если значение, которое я сохранил в sessionStorage, равно «баскетбол», я хочу перенаправить пользователя на страницу новостей баскетбола. Если значение не сохранено, я оставлю пользователя на главном экране.

Я могу справиться с этим с window.location.replace, но это вызывает обратную передачу страницы. Я бы предпочел справиться с этим перенаправлением способом React, загрузив соответствующий компонент, а не выполняя обратную передачу страницы.

Могу ли я сделать это с React Router 4?

Answer 1

Вы также можете сделать что-то подобное вместо Redirect:

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

Answer 2

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

Answer 3

Вы можете использовать компонент <Redirect> и обернуть его в условные выражения:

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

Официальные документы имеют хороший пример с рабочим процессом аутентификации.