Отключение NavLink, если пользователь не вошел в систему - PullRequest
Новая
       5

Отключение NavLink, если пользователь не вошел в систему

0 голосов
/ 15 февраля 2020

Я новичок в React и пытаюсь отключить ссылку Контакты в NavBar, если пользователь еще не вошел в систему, и перенаправить их на страницу входа. Посоветуйте пожалуйста как go об этом. Это для приложения диспетчера контактов. Я пытаюсь проверить, вошел ли пользователь в систему, прежде чем показывать контакты из MongoDB. 

import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { toast } from 'react-toastify';

const NavBar = () => {
    const handleClick = e => {
        if (!localStorage.getItem('username')) {
            toast.error('Please Login before trying to access contacts');
            e.preventDefault();
            window.location = '/login';
        }
    };
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <Link className="navbar-brand" to="/contacts">
                Contact Manager
            </Link>
            <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span className="navbar-toggler-icon" />
            </button>
            <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div className="navbar-nav">
                    <NavLink className="nav-item nav-link" onClick={handleClick()} to="/contacts">
                        Contacts
                    </NavLink>
                    <NavLink className="nav-item nav-link" to="/login">
                        Login
                    </NavLink>
                    <NavLink className="nav-item nav-link" to="/register">
                        Register
                    </NavLink>
                </div>
            </div>
        </nav>
    );
};

export default NavBar;
...