Рекомендации React + Redux для перенаправления маршрутизатора при изменении состояния избыточности

Question

Я использую response-router-dom и пытаюсь связать его с redux. Я хочу перенаправить в действии, но не знаю, как лучше это сделать. Мне нужно использовать history.push () или что-то еще? Может быть, у реакции есть нативные подходы к этому?

Мой код с контейнером компонента:

class ConnectedAppContent extends React.Component {
    render() {
        return (
            <div id="content">
                <Router>
                    <Switch>
                        <PropsRoute path="/login" component={LoginForm} doLogin={this.props.doLogin} />
                        <PrivateRoute path="/scan" redirectTo="/login" component={Scanner} token={this.props.token} />
                        <PrivateRoute path="/result" redirectTo="/login" component={ParsedQRCode} token={this.props.token} />
                    </Switch>
                </Router>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        token: state.token,
        parsedQRCode: state.parsedQRCode
    }
}

const mapDispatchToProps = dispatch => ({
    doLogin: token => dispatch(doLogin(token))
});

export const AppContent = connect(mapStateToProps, mapDispatchToProps)(ConnectedAppContent);

Answer 1

Если вы хотите направить к определенному пути в каком-либо событии, например, при нажатии кнопки или при отправке, вы можете использовать Redirect или Link, которые предоставлены response-router-dom.

Кроме того, router-router работает с redux, но в некоторых случаях это не так, и вы можете обернуть свой компонент с помощью withRouter , а затем вы можете легко протолкнуть маршрут с помощью следующих команд:

history.push('/your-route')

Answer 2

Я бы

import {Redirect} from 'react-router-dom';

и в методе рендеринга вы можете:

  render() {

    if (yourRedirectState) {
      return <Redirect to='/route'/>;
    }   
}

Answer 3

Я не знаю других подходов, но history.push () будет работать

const stateChange = () => {
  this.props.doLogin();
  this.props.history.push("/routetoredirect")
}