0

正しくログインした後、ユーザーを転送したい。React-router を使用して Router パスを解決します。

うまくいかなかったさまざまなことを試しました（コメント行を参照）。

現在、私は使用しようとしていますhistory.push()が、コンパイラは言う

history.push は関数ではありません。

からの 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);

前もって感謝します。

4

2 に答える 2

1

プッシュを介してナビゲートし、アクションクリエーターを redux-router に置き換えることができます: Linkを参照してください。

このような：

import { push } from 'redux-router';

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

const mapDispatchToProps = {
    login: LoginControllerActions.login,
    push
};
于 2016-11-29T17:51:10.373 に答える
0

あなたの間違いは import ステートメントにあると思います。それを次のように置き換えます。

 import { browserHistory } from 'react-router';
于 2016-11-29T17:47:33.840 に答える