Reactjs 在react redux中单击事件后，如何从reducer/componet重定向到指定路由

这是我的组件登录屏幕，我想使用道具检查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>
            );
        }
    }

我的dispatcher dunction调用reducer事件，我在那里检查用户名和密码，并重新输入状态。isAuthenticated为true

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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
从“react router dom”导入{Route，Link}
从“/GamesPage”导入GamesPage；
从“/LoginPage”导入登录页面；
导入“/App.css”；
从“/AddBlogPost”导入AddBlogPost；
从“/MembersList”导入成员列表；
从“/Comments”导入注释；
导出类主页扩展组件{
建造商（州）
{
超级（）；
log（“状态为：”，状态）；
}
render（）{
返回(








);
}
}
导出默认主页；

我想您正在尝试动态重拨。那样的话，你看webpack:///./~/fbjs/lib/warning.js？：36警告：设置状态（…）：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

componentWillMount

。这是我在控制台中遇到的错误，在使用@shubhamkhattrithast上面的代码后@shubhamkhattrithast对我不起作用。您在哪里使用

this.props.history.push（）

您还可以使用我想您正在尝试动态重新选中的。那样的话，你看webpack:///./~/fbjs/lib/warning.js？：36警告：设置状态（…）：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

componentWillMount

。这是我在控制台中遇到的错误，在使用@ShubhamKhatrithast上面的代码后@ShubhamKhatrithast对我不起作用。您在哪里使用

this.props.history.push（）

您也可以使用

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;