Javascript 如何实现注销操作返回登录页面的功能？

我有一个关于注销功能实现的问题

正如您在codesandbox中看到的，我的应用程序已变得具有以下外观：

下面是Logout.js代码，我想这可能是我要编辑的地方：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setAuthedUser } from '../actions/authedUser'

class Logout extends Component {
    componentDidMount() {
        this.props.setAuthedUser(null)
    }

    render() {
        return<div>Logging out...</div>
    }
}

export default connect(
    null,
    { setAuthedUser }
)(Logout)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../actions/authedUser”导入{setAuthedUser}
类注销扩展了组件{
componentDidMount（）{
this.props.setAuthedUser（null）
}
render（）{
正在注销。。。
}
}
导出默认连接(
无效的
{setAuthedUser}
)（注销）

这是导航栏，Menu.js：

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import { Image } from 'semantic-ui-react'

class Menu extends Component {
    render() {
        const { users, authedUser } = this.props
        const { name, avatarURL } = users[authedUser]

        return (
            <div className='ui fixed inverted menu'>
                <div className='ui container'>
                    <div className='item' />
                    <NavLink
                        to='/'
                        exact
                        className='header item'
                        activeClassName='active'
                    >
                        <Image
                            src='/would-you-rather.png'
                            style={{ width: '50px', marginRight: '5px' }}
                         />
                         Home
                    </NavLink>
                    <NavLink to='/add' exact className='item' activeClassName='active'>
                        New Question
                    </NavLink>
                    <NavLink
                        to='/leaderboard'
                        exact
                        className='item'
                        activeClassName='active'
                    >
                        Leader Board
                    </NavLink>
                    <div className='ui right floated item'>
                        <span style={{ marginRight: '10px' }}>Hello, {name}</span>
                        <img className='ui avatar image' src={avatarURL} alt='' />
                    </div>
                    <NavLink to='/logout' exact className='item' activeClassName='active'>
                        Logout
                    </NavLink>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return { authedUser: state.authedUser, users: state.users }
}

export default connect(mapStateToProps)(Menu)

import React，{Component}来自“React”
从“react router dom”导入{NavLink}
从“react redux”导入{connect}
从“语义ui反应”导入{Image}
类菜单扩展组件{
render（）{
const{users，authedUser}=this.props
const{name，avatarURL}=用户[授权人]
返回(
家
新问题
领导委员会
你好，{name}
注销
)
}
}
常量mapStateToProps=（状态）=>{
返回{authedUser:state.authedUser，users:state.users}
}
导出默认连接（MapStateTops）（菜单）

我想知道如何实现注销返回到登录验证页面的功能

请帮忙，我将不胜感激

---

关于。

最简单的方法是在

组件安装中重置用户后立即使用
此.props.history.push（'/login'）

react router dom
为
Logout.js
提供了
history
，因为它是一个路由组件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setAuthedUser } from '../actions/authedUser'

class Logout extends Component {
    componentDidMount() {
        this.props.setAuthedUser(null)
        this.props.history.push('/login')
    }

    render() {
        return<div>Logging out...</div>
    }
}

export default connect(
    null,
    { setAuthedUser }
)(Logout)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../actions/authedUser”导入{setAuthedUser}
类注销扩展了组件{
componentDidMount（）{
this.props.setAuthedUser（null）
this.props.history.push（“/login”）
}
render（）{
正在注销。。。
}
}
导出默认连接(
无效的
{setAuthedUser}
)（注销）
最简单的方法是在
组件安装中重置用户后立即使用
这个.props.history.push（'/login'）

react router dom
为
Logout.js
提供了
history
，因为它是一个路由组件

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { setAuthedUser } from '../actions/authedUser'

class Logout extends Component {
    componentDidMount() {
        this.props.setAuthedUser(null)
        this.props.history.push('/login')
    }

    render() {
        return<div>Logging out...</div>
    }
}

export default connect(
    null,
    { setAuthedUser }
)(Logout)

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../actions/authedUser”导入{setAuthedUser}
类注销扩展了组件{
componentDidMount（）{
this.props.setAuthedUser（null）
this.props.history.push（“/login”）
}
render（）{
正在注销。。。
}
}
导出默认连接(
无效的
{setAuthedUser}
)（注销）
嗨，@CoreyLarson，谢谢你的回答。我需要在Logout.js组件中实现
历史记录吗？@jose-renato-m，你不需要。因为
是应用程序中的一个路由，
历史记录
作为道具提供给它。对不起，@CoreyLarson……我没有“我没看见你把
历史记录
代码放在那里。我会努力的。对不起@jose-renato-m，我应该在回答中说得更清楚。将更新它。嗨，@CoreyLarson，谢谢你的回答。我需要在Logout.js组件中实现
历史记录吗？@jose-renato-m，你不需要。因为
是您应用程序中的一条路径，
历史记录
作为道具提供给它。对不起，@CoreyLarson……我没有看到您将
历史记录
代码放在那里。我会试试。对不起@jose-renato-m，我应该在回答中更清楚地说明这一点。我会更新它。