成功登录后转发

我想正确登录后转发用户。我使用React-router来解析路由器路径。成功登录后转发

我尝试了各种不起作用的东西（请参见注释行）。

目前，我试图用history.push()，但是编译器说

history.push不是一个函数。

我注意到从"redux-router"的推式方法没有使用..相反，它可能会在props中寻找一个不存在的方法。

我该怎么做？

/** 
* Created by wding on 11/21/2016. 
*/ 
import React from "react"; 
import ReactDOM from "react-dom"; 
import { 
    Grid, 
    Row, 
    Col, 
    PageHeader, 
    Well, 
    Input, 
    Panel, 
    ButtonInput, 
    Button, 
    Form, 
    FormGroup, 
    ControlLabel, 
    FormControl, 
    Checkbox 
} from "react-bootstrap"; 
import {IndexLinkContainer, LinkContainer, Link, Redirect} from "react-router-bootstrap"; 
import browserHistory from "react-router"; 
import * as LoginControllerActions from "../actions/LoginController" 
import {connect, dispatch} from "react-redux"; 
import {push,pushState} from "redux-router"; 

export class StartPage extends React.Component { 
    getResearcher(event) { 
     event.preventDefault(); 
     var username = ReactDOM.findDOMNode(this.refs.username).value; 
     var password = ReactDOM.findDOMNode(this.refs.password).value; 
     console.log(username, password); 

     // this.props.login(username, password); 
     // this.context.history.transitionTo('/ExperimentDashboard'); 
     const {history} = this.props; 
     console.log("history",history); 
     history.push('/ExperimentDashboard'); 
    } 

    componentWillReceiveProps() { 
     if (this.props.isLoggedIn) { 
     } 
    } 
      // console.log('Attempt to push state') 
      //history.pushState(null, '/ExperimentDashboard'); 
      //history.go(-1); 
     // browserHistory.push('/ExperimentDashboard'); 

    render(){ 

     return (
      <Form horizontal> 
       <div> 
        <Col md={8}> 
         All experiments 
        </Col> 
        <Col md={4}> 
         <Panel header="Login for Researchers"> 
          <div style={{ 
           "paddingLeft": "25px", 
           "paddingRight": "25px" 
          }}> 
           <FormGroup controlId="formHorizontalEmail"> 
            <Col componentClass={ControlLabel}> 
             Name 
            </Col> 
            <Col > 
             <FormControl type="username" placeholder="Name" 
                ref="username"/> 
            </Col> 
           </FormGroup> 

           <FormGroup controlId="formHorizontalPassword"> 
            <Col componentClass={ControlLabel}> 
             Password 
            </Col> 
            <Col> 
             <FormControl type="password" placeholder="Password" 
                ref="password"/> 
            </Col> 
           </FormGroup> 

           <FormGroup> 
            <Col> 
             {/*<LinkContainer to="/ExperimentDashboard">*/} 
             <Button type="submit" onClick={this.getResearcher.bind(this)}> 
              Log in 
             </Button> 
             {/*</LinkContainer>*/} 
            </Col> 
           </FormGroup> 
          </div> 
         </Panel> 
        </Col> 
       </div> 
      </Form> 
     ) 
    } 

} 

export function mapStateToProps(state) { 
    const { 
     login:{formState:{username, password},isLoggedIn}, 
     router 
    } = state; 
    return {username, password,router,history,isLoggedIn}; 
} 

const mapDispatchToProps = { 
    login: LoginControllerActions.login, 

}; 

export default connect(mapStateToProps, mapDispatchToProps)(StartPage);

在此先感谢。

来源

2016-11-29 Peter Jiang

从未使用过'终极版，router'所以只是用逻辑，你检查，如果'history'是'router'的道具？你正在将'mapStateToProps'函数设置为''router.history.push'是正确的方法吗？ – ZekeDroid

您应该可以调用“this.props.router.push（...）”或“browserHistory.push（...）”。你是否正确设置了？也许把它粘贴在这里，我们可以看到。 –

您可以通过推导航和终极版路由器更换动作的创造者：见Link。

像这样：

import { push } from 'redux-router'; 

// Somewhere in code 
push('/orders/' + order.id)); 

const mapDispatchToProps = { 
    login: LoginControllerActions.login, 
    push 
};

来源

2016-11-29 17:51:10 kjonsson

谢谢。我完全忘了添加推送到mapDispatchToProps –

我认为你的错误在于导入声明。将其替换为：

import { browserHistory } from 'react-router';

来源

2016-11-29 17:47:33

成功登录后转发

回答

相关问题