Question

我正在使用react-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

如果您想通过单击或提交按钮在某个事件上路由到特定路径，则可以使用react-router-dom提供的重定向或链接。

此外，react-router可以与redux一起使用，但是在某些情况下则不能，您可以使用 withRouter 包装组件，然后可以使用以下命令轻松推送路由：

history.push('/your-route')

Answer 2

我不知道其他任何方法，但是history.push（）可以工作

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

Answer 3

我会

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

，并且在render方法中，您可以：

  render() {

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

针对Redux状态更改进行路由器重定向的React + Redux最佳做法

3 个答案: