Question

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

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

目前我正在尝试使用history.push()，但编译器说

history.push不是一个函数。

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

我该怎么做？

/**
 * 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

您可以使用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';

成功登录后转发

2 个答案: