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

Question

抱歉我的英语不好，英语不是我的第一语言。

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

“ × 类型错误：无法读取未定义的属性‘替换’”

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

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

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;`

Answer 1

你应该使用this.props.history.push('/login').

错误的原因是您没有使用 HOC React 路由器包装组件导出。

添加导入 import {withRouter} from 'react-router-dom';并像这样包装组件导出export default withRouter(Home);。这样，history 属性将被注入到您的 Home 组件中。