Question

这是我在authReducer中的初始状态。

const initialState = {
    token:'',
    isLogin:  false,
    error: {}
};
function AuthReducer(state = initialState, action) {
    switch(action.type){
        case AUTH_SUCCESS:
            return sessionStorage.setItem('token',action.payload),{
                ...state,
                isLogin: true,
                token: action.payload,
                error: {}
            };
        case AUTH_FAILED:
            return {
                ...state,
                isLogin: false,
                token: '',
                error: action.payload
            };
            default:
            return state
    }
}
export default AuthReducer;

这是我的登录组件，可以正常工作。用户可以进行身份验证，并且一切正常：

class Login extends Component {
    constructor(props){
        super(props);
        this.state ={
            username: '',
            password: ''
        }
    }
    onSubmit = e => {
        e.preventDefault();

        this.props.login(this.state.username, this.state.password);
    }

    render() {
       .....
        )
    }
}

const mapStateToProps = state => {
    return {
        get: { auth : state.AuthReducer}
    }
}
const mapDispatchToProps = dispatch => {
    return {
        login: (username, password) => {
            return dispatch(login(username, password));
        }
    };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));

我的路由器是这样的：

class App extends Component {
  constructor(props){
    super(props)
  }
  render() {
    let PrivateRoute = ({ component: ChildComponent, isLogin, ...rest}) => {
      console.log({...rest}, "this is rest")
      return <Route 
      {...rest}
        render={props => {
          if (!isLogin) {
            return <Redirect to="/login" />;
        } else {
          return <ChildComponent {...props} />
        }
      }} />
    }
    return (
      <div>
          <Home />
          <Switch>
          <PrivateRoute path="/" exact isLogin={this.props.auth.isLogin}  component={mainContent} />
          <PrivateRoute path="/posts" isLogin={this.props.auth.isLogin} component={Posts} />
          <Route path="/login"  component={Login} />
        </Switch>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    auth: state.AuthReducer
  }
}
const mapDispatchToProps = dispatch => {
  return {
    getUser: () => {
      return dispatch(getUser());
    }
  };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

在React Router中，他们说您必须使用react-router-dom中的 withRouter 。我的问题是登录正常。但是我无法在 privateroute 中访问道具，因此当react渲染新页面时，我的isLogin设置为false。我有些想法是路由器不知道我的redux或受保护的组件不能知道props的变化。我的PrivateRoute中的所有子组件都与react-redux.sry有关此混乱代码的联系。

Answer 1

这里的问题是您没有从reducer获取isLogin值。当您尝试在路由器文件中获取reducer值时：

const mapStateToProps = state => {
  return {
    auth: state.AuthReducer
  }
}

您将获得this.props.auth.AuthReducer的未定义值，因为mapStateToProps中的state值将是化简器的初始值。因此，您可以直接从下面的状态中获取登录名，然后尝试访问this.props.auth：

const mapStateToProps = state => {
  return {
    auth: state.isLogin
  };
};

或者您可以用此代码替换并使用this.props.auth.isLogin：

const mapStateToProps = state => {
  return {
    auth: state
  };
};

请参阅更多内容： https://codesandbox.io/s/react-router-dom-with-private-route-sr61v

withRouter无法与Redux一起正常工作-React Redux react-router

1 个答案: