在事件点击后,如何从reducer / componet重定向到特定路由react redux

时间:2017-07-19 09:12:22

标签: reactjs redux react-router react-redux react-router-redux

这是我的组件登录屏幕,我想检查isAuthenticated是真的在这里使用道具我能够看到我的标志在这里设置为真但我想在登录后重定向我怎么能这样做?

    export class LoginPage extends Component {
        onLogin = () => {
            var credentials = {
                username: this.userName,
                password: this.password
            }
            this.props.checkLogin(credentials);
        }
        render() {
            return (
                <form>
                    <div className="imgcontainer">
                        <img src={img} alt="Avatar" className="avatar" />
                    </div>
                    <div className="container">
                        <label><b>Username</b></label>
                        <input type="text" placeholder="Enter Username" name="uname" onChange={(e) => this.userName = e.target.value} />

                        <label><b>Password</b></label>
                        <input type="password" placeholder="Enter Password" name="psw" onChange={(e) => this.password = e.target.value} />

                        <button type="submit" onClick={(event) => { event.preventDefault(); this.onLogin(); this.isUserClicked = true; }}>Login</button>
                        <label style={{ color: 'red' }}>{this.isUserClicked && !this.props.state.reducer.isAuthenticated.isUserAuthenticated && <span>Username and password not matched..!</span>}</label>
                    </div>

                </form>
            );
        }
    }

这是我的地图状态道具功能

export const mapStateToProps = (state) => {
    return {
        state: state
    }
}

我的调度员调用reducer事件,我正在检查那里的用户名和密码,我正在撤回state.isAuthenticated是真的

export const mapDispatchToProps = (dispatch) => {
    return {
        checkLogin: (credentials) => dispatch({ type: 'CHECK_LOGIN', credentials })
    }
};

LoginPage = connect(mapStateToProps, mapDispatchToProps)(LoginPage);

export default LoginPage;

这是我的路由文件

import React, { Component } from 'react';
import logo from './logo.svg';
import { Route, Link } from 'react-router-dom'
import GamesPage from './GamesPage';
import LoginPage from './LoginPage';
import './App.css';
import AddBlogPost from './AddBlogPost';
import MembersList from './MembersList';
import Comments from './Comments';


export class HomePage extends Component {
    constructor(state)
    {
        super();
        console.log("state is:",state);
    }
    render() {
        return (
            <div className="col-md-12" style={{ paddingLeft: 'unSet' }}>
                <div className="col-md-3" style={{ paddingLeft: 'unSet' }}>
                    <div className="sidebar-nav">
                        <div className="well" style={{ width: '300px', padding: '8px 0px' }}>
                            <ul className="nav nav-list" style={{ height: '950px' }}>
                                <li className="nav-header" style={{ marginLeft: '45px', marginBottom: '50px' }}><img src={logo} className="App-logo" alt="logo" /></li>
                                <li className="active"><a href="index"><i className="fa fa-home"></i> Dashboard</a></li>
                                <li><a href="#"><i className="fa fa-edit"></i> <Link to="/AddBlog">Add Blog Post</Link></a></li>
                                <li><a href="#"><i className="fa fa-sign-in"></i> <Link to="/login">Login</Link></a></li>
                                <li><a href="#"><i className="fa fa-user"></i> <Link to="/members">Members</Link></a></li>
                                <li><a href="#"><i className="fa fa-comment"></i><Link to="/comments">Comments</Link> </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <Route exact path="/games" component={GamesPage} />
                    <Route path="/login" component={LoginPage} />
                    <Route path="/AddBlog" component={AddBlogPost} />
                    <Route path="/members" component={MembersList} />
                    <Route path="/comments" component={Comments} />                    
                </div>
            </div>
        );
    }
}

export default HomePage;

0 个答案:

没有答案