时间戳

首页 > 解决方案 > 如何在操作中导航到反应路由器 v4 中的另一个页面

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

问题描述

我正在构建一个具有登录屏幕和仪表板的应用程序。当我成功登录时，我希望我的应用程序进入仪表板，但是当我history.push('/dashboard');在我的ACTION中调用 a 时（我认为历史推送将在承诺后被调用）。更改但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'));

标签： reactjsreact-routerreact-redux

解决方案

如果 url 改变了，那么这意味着 history.push 已经工作了，所以我猜你错过了在你的Routes Add 中添加这个路由，

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

推荐阅读