Условные навигационные ссылки «Чат» и «Выход» отображаются только после обновления - PullRequest
0 голосов
/ 15 октября 2019

Я построил условную навигационную панель для приложения реакции. После входа в систему он должен сразу показать навигационную ссылку чата и навигационную ссылку выхода из системы, если есть токен JWT. Тем не менее, он показывает их только при обновлении. Почему это так и как я могу решить эту проблему?

Я использую объект JWT в качестве авторизации.

Navbar.js

import React, {Component} from 'react';
import {Navbar, Nav} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import Logo from '../../logo/blacklogo.png';
import Logout from '../logoutNavLink/logout';
import getJwt from '../../utils/getJwt';
import '../navbar/style.css'

const jwt = getJwt();

class Navigation extends Component {
    state = {
       isAuthenticated: jwt
    }

    render() {

        return (
          <Navbar bg="light" expand="sm">
             <Navbar.Brand href="/">
               <img
                  src={Logo}
                  className="d-inline-block align-top"
                  alt="Soundbudz logo"
               />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">

              {this.state.isAuthenticated ? (
                <Nav className="ml-auto">
                 <Link to="/chat">Chat</Link>
                 <Logout to="/">Logout</Logout>
                </Nav> 
              ):(
                <Nav className="ml-auto">
                 <Link to="/registration">Registration</Link>
                 <Link to="/login">Login</Link>
                </Nav>
             )}

            </Navbar.Collapse>
           </Navbar>
     )}
}

export default Navigation;

1 Ответ

0 голосов
/ 16 октября 2019

вам нужно сначала установить для isAuthenticated значение null и отправить jwt в качестве реквизита компоненту навигации, а затем создать функцию, в которой вы проверяете, существует ли jwt и, если это так, меняете состояние isAuthenticated таким образом,ваше возвращение будет работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...