Как мне реализовать функцию выхода из системы? Вернуться на страницу входа?

Question

У меня проблема с реализацией функции выхода из системы.

Как вы можете видеть в codesandbox, мое приложение стало таким: https://sit9d.csb.app/login

Здесь это код выхода из системы. 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)

Вот панель навигации, Меню. 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)

Я бы Хотелось бы узнать, как я могу реализовать функцию выхода из системы, возвращаясь к странице аутентификации входа в систему?

Пожалуйста, помогите, я был бы признателен.

С уважением.

Answer 1

Самый простой способ - использовать this.props.history.push('/login') сразу после сброса вашего пользователя в componentDidMount.

history предоставляется Logout.js на react-router-dom, поскольку это компонент маршрута.

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)