时间戳

首页 > 解决方案 > 如何在反应中单击注销时重定向到登录页面

javascript - 如何在反应中单击注销时重定向到登录页面

问题描述

对不起我的英语不好，英语不是我的第一语言。

嗨，我是反应 JS 的新手，在下面的代码中一切正常，但是当我单击注销处理程序时，它显示

“ × TypeError: 无法读取未定义的属性‘替换’”

您能否让我知道如何在单击注销处理程序时重定向到登录页面，

我尝试了所有可能性，例如：

this.props.history.push('somepath') this.context.history.push('somepath') 但对我没有任何帮助我研究了很多但没有找到实际答案。

 import React,{Component} from 'react';
import {BrowserRouter,Link,Route} from 'react-router-dom';
import Contact from './contact';

class Home extends Component {
    constructor(props) {
        super(props)
    }

    logoutHandler =(e) => {
        this.props.history.replace('/login')
    }

    render() {
        return(
            <BrowserRouter>
                <div>
                    <header>
                        <Link to='/contact'>Contact</Link>
                    </header>
                    <div>
                        <Route path='/contact' Component={Contact}></Route>
                    </div>
                    <a href="#" onClick={e=>this.logoutHandler(e)}>Logout</a>
                </div>
            </BrowserRouter>
        )
    }
}
export default Home;`

标签： javascriptreactjshttp

解决方案

用于WithRouter访问历史对象

 import React,{Component} from 'react';
 import { withRouter } from 'react-router'
import {BrowserRouter,Link,Route} from 'react-router-dom';
import Contact from './contact';

class Home extends Component {
    constructor(props) {
        super(props)
    }

    logoutHandler =(e) => {
        this.props.history.push('/login')
    }

    render() {
        return(
            <BrowserRouter>
                <div>
                    <header>
                        <Link to='/contact'>Contact</Link>
                    </header>
                    <div>
                        <Route path='/contact' Component={Contact}></Route>
                    </div>
                    <a href="#" onClick={e=>this.logoutHandler(e)}>Logout</a>
                </div>
            </BrowserRouter>
        )
    }
}
export default withRouter(Home);

推荐阅读