Перенаправляет в предыдущее состояние после щелчка Nav Link?

Question

Итак, у меня есть панель навигации, которая, когда пользователь нажимает "Выйти", отображает панель навигации, которую видит не авторизованный пользователь. Пока что у меня это не работает, но моя проблема в том, что когда я нажимаю один из других кликов на моей веб-странице, например, "О программе", панель навигации возвращается в состояние "Выйти". Как мне исправить это? Я думаю, это потому, что в моем исходном коде App.js userId: 123(в целях тестирования), который жестко закодирован и всегда запускает это.

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: 123
    }
}
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

Вам лучше сохранять состояние пользователя loggedIn в localstorage, а не проверять состояние. И проверьте, вошел ли пользователь в систему или нет, чтобы отобразить желаемый результат.

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

Другим вариантом может быть контекстный API для доступа к пользовательскому состоянию loggedIn.

Похоже на страницу перезагрузки state.userID значение не там после перезагрузки. Из вашего кода вы устанавливаете userID в конструкторе это будет называться старением на этапе монтирования жизненного цикла компонента.

Пин мне в случае любого запроса:)