登錄成功后轉發

Question

我想在正確登錄后轉發用戶。 我使用React-router來解析路由器路徑。

我嘗試了各種無效的方法（請參閱注釋行）。

目前，我正在嘗試使用history.push() ，但是編譯器說

history.push不是函數。

我注意到沒有使用"redux-router"中的push方法。相反，它可能會在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);

提前致謝。

Answer 1

您可以通過push進行導航，並用redux-router替換動作創建者：請參閱Link 。

像這樣：

import { push } from 'redux-router';

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

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

Answer 2

我認為您的錯誤在於import語句。 替換為：

 import { browserHistory } from 'react-router';