Question

我正在构建一个具有登录屏幕和仪表板的应用程序。当我成功登录时，我希望我的应用程序转到仪表板，但是当我在操作中调用history.push('/dashboard');时（我认为历史推送将在承诺后调用此处）。 URL更改但不呈现视图。

我的登录组件：

onSubmit(values){
    this.props.loginUser(values);
  }
render(){
return(
  <div>
    <form onSubmit={this.props.handleSubmit(this.onSubmit.bind(this))}>
      <Field
        label='Username'
        name='username'
        component={this.renderField}
        type="text"
      />

      <Field
        label='Password'
        name='password'
        component={this.renderField}
        type="password"
      />

      <button type="submit">Login</button>
    </form>
    {this.renderError()}
  </div>
);}}


    function mapStateToProps({profile}){
  return {profile};
}

export default reduxForm({
  validate,
  form:'LoginForm'
})(withRouter(connect(mapStateToProps,{loginUser})(Login)))

我的行动：

export function loginUser(values){
  return dispatch => axios.post(`${ROOT_URL}verifyuser`,values)
    .then((response)=>{
      if(response.data.code == 'success'){

        dispatch(success(response.data),history.push('/dashboard'));
      }else{
        dispatch(failure(response.data));
      }
    })

    function success(response) { return {type:userConstants.LOGIN_SUCCESS,payload:response}; }
    function failure(response) { return { type: userConstants.LOGIN_FAILURE, payload:response } }
}

我的信息中心组件：

class Dashboard extends Component {

  render(){
    return(
      <div>Test</div>
    );
  }
}

我的路由

const App = () => (
  <Switch>
    <Route path="/dashboard" component={Dashboard}/>
    <Route exact path="/" component={Login} />
  </Switch>
)

ReactDOM.render(
  <Provider store={createStore(reducers,applyMiddleware(promise,thunk))}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  , document.getElementById('root'));

Answer 1

如果网址发生了变化，那就意味着，history.push已经有效了，所以我猜你错过了在Routes中添加这条路线添加，

<Route path='/dashboard' component={Dashboard}/>

如何在操作中的反应路由器v4中导航到另一个页面

1 个答案: