Как изменить навигационную панель, когда пользователь входит и выходит?

Question

Итак, я понимаю, как создавать отдельные компоненты, такие как форма, панель навигации и нижний колонтитул, но я не понимаю, как изменить состояние панели навигации, когда пользователь выходит из системы.

Например, страница входа в систему должна иметь форму с очень простой навигационной панелью и парой навигационных ссылок, но как только пользователь войдет в систему, навигационная панель должна включать навигационные ссылки "выхода" и нижний колонтитул спара навигационных ссылок.

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю ссылку «выход», она отображает страницу входа, НО, когда я нажимаю на одну из других навигационных ссылок, панель навигации отображает «зарегистрированный»"версия.

CustomNavbar.js

import React, { Component } from 'react'
import { Navbar, Nav, NavItem } from 'react-bootstrap';

class CustomNavbar extends Component {

render() {
    if (this.props.userID === null) {
        return (
            <div>
                <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
                    <Navbar.Brand href="/">
                        Ndnu's Notes
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                    </Navbar.Collapse>
                </Navbar>
                <Navbar className="footer text-center" fixed="bottom" expand="lg" bg="light">
                    <Nav.Link href="/contactus">Contact Us</Nav.Link>
                    <Nav.Link href="/privacyterms">Privacy & Terms</Nav.Link>
                    <Nav.Link href="/about">About</Nav.Link>
                </Navbar>
            </div>
        )
    } else {    
        return (
            <div>
                <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
                    <Navbar.Brand href="/">
                    Ndnu's Notes
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="mr-auto">
                        </Nav>
                        <Nav>
                            <Nav.Link eventKey={2} href="/myAccount"> <i class="fas fa-user"></i> My Account</Nav.Link>
                            <Nav.Link eventKey={1} href="/" onClick={this.props.logUserOut}> <i class="fas fa-sign-out-alt"></i> Log Out</Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>

                {/* Footer */}
                <Navbar fixed="bottom" bg="light">
                    <Nav.Link href="/contactus">Contact Us</Nav.Link>
                    <Nav.Link href="/privacyterms">Privacy & Terms</Nav.Link>
                    <Nav.Link href="/about">About</Nav.Link>
                </Navbar>
            </div>
        )
    }
}
}
export default CustomNavbar

App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginAndRegister from './LoginAndRegister'
import ContactUs from './Components/ContactUs.js';
import PrivacyTerms from './Components/PrivacyTerms.js';
import CustomNavbar from './Components/CustomNavbar.js';
import About from './Components/About.js';
import Table from './Components/Table.js';

class App extends React.Component {


constructor() {
    super();
    this.state = {
        userID:
    }
}
logUserOut = (e) => {
    e.preventDefault()
    this.setState({userID: null});
}

render() {
    return (
        <Router>
            <div>
                <CustomNavbar userID={this.state.userID} logUserOut={this.logUserOut} />
                <Route exact strict path="/contactus" component={ContactUs} />
                <Route exact strict path="/about" component={About} />
                <Route exact strict path="/privacyterms" component={PrivacyTerms} />
                  {!this.state.userID && <LoginAndRegister userID={this.state.userID}/>}
                <Table />
            </div>
        </Router>
    )
}
}

export default App;

Answer 1

Вплоть до этого момента не похоже, чтобы у вас был какой-либо код, который проверяет загрузку страницы, если ваш пользователь уже вошел в систему (проверяя куки-файл или запрашивая сервер или что-то в этом роде).Это означает, что каждый раз, когда ваша страница загружается, ваше состояние входа будет соответствовать тому, что вы установили для своего начального состояния.Вы делаете это в вашем App конструкторе:

this.state = {
  userID: 123 // you mentioned in your comments that this is what you used
}

Итак, когда страница первоначально загружается, вот что происходит:

1. App конструктор вызываетсяи начальное состояние устанавливается с помощью userID: 123.Итак, страница загружена пользователем 123, уже вошедшим в систему. Вот почему вы видите панель навигации с доступными «Моя учетная запись» и «Выйти».

2. Вы нажимаете «Журнал»Из".Это правильно устанавливает userID в null.Вы вышли из системы.У вас больше нет «Моего аккаунта» или «Выйти» на вашей навигационной панели.

3. Вы нажимаете на одну из других навигационных ссылок, например «Связаться с нами». Новая страница загружена. Все начинается заново.

4. App конструктор вызывается снова, и исходное состояние снова устанавливается на userID: 123,Ваш пользователь вошел в систему.

Чтобы это исправить, вы можете начать с установки userID: null в своем конструкторе.Таким образом, с каждой новой загрузкой страницы пользователь начинает регистрироваться out .Но, в конце концов, вам, вероятно, потребуется встроить код, который поддерживает (в браузере клиента) какой-то файл cookie, который сообщает вашему сайту, что пользователь вошел в систему, и поддерживает это состояние при загрузке одной страницы на другую.

Я создал песочницу с кодом , которая использует предоставленный вами код, но затем добавил некоторые модификации, чтобы помочь продемонстрировать то, что я объяснил выше.В этой изолированной программной среде пользователь начинает выход из системы .Когда вы нажимаете кнопку для имитации входа в систему, пользователь входит в систему. Но если вы нажмете на ссылку панели навигации, которая приведет вас на другую страницу, вы увидите, что пользователь снова вышел из системы.

---

Отдельно, вы должны заметить, что некоторые из ваших JSX-кодов (в частности, теги <i> в CustomNavbar.js) используют опору class - их следует изменить на className, или иначе Реакт будет жаловаться .