react router - Redirection after login

后端 未结 7 2501
天命终不由人
天命终不由人 2021-01-30 14:22

Could you please help me in understanding the redirection mechanism I could use with latest version of react router ( v1.1.0 ) . I would like to redirect to a

7条回答
  •  北海茫月
    2021-01-30 14:37

    @terranmoccasin 's answer is correct. However there is a common need very few examples address.

    Let's say you need to secure several routes (dashboard1, dashboard2, ...). How do you redirect back to the original page once you log in successfully? In other words, what do you do with {nextPathname: nextState.location.pathname}?

    Here's what I do in ./containers/LoginContainer.js:

    import { push } from 'react-router-redux';
    const mapStateToProps = (state) => ({
      nextPathname: state.routing.locationBeforeTransitions.state.nextPathname,
    });
    const mapDispatchToProps = (dispatch) => ({
      changeLocationOnSignIn: (nextPathname) => {
        dispatch(push(nextPathname));
      },
    });
    

    and in ./components/Login.js

    componentWillReceiveProps(nextProps) {
      // user signed in or signed up, assuming redux. you may use this elsewhere.
      if (nextProps.user.status === 'authenticated' && nextProps.user.user &&
         !nextProps.user.error) {
           this.props.changeLocationOnSignIn(this.props.nextPathname);
      }
    

    React-router 2.4.0 (April 2016) introduced withRouter which creates a HOC. However it wraps React.createClass, not a JS class. I haven't been able to get it working with redux-form, etc. Besides I think the above code is easier to comprehend.

提交回复
热议问题