如何在 Reactjs Redux 应用程序中显示/隐藏 reactstrap 导航栏？

Question

我想根据用户的登录状态显示/隐藏导航栏。用户通过身份验证后，我将访问令牌存储在本地存储中。我试图通过检查访问令牌是否存在来显示/隐藏导航栏。但它需要硬刷新。

请找到header组件：/components/app-header.js

const AppHeader = () => (
    <Navbar color="light" light expand="md">
        <NavbarBrand href="/">TestBrand</NavbarBrand>
        <Nav navbar>
            <NavItem>
                <Link className="lnk" to='/users'>Users</Link>
            </NavItem>            
        </Nav>
        <Nav className="ml-auto" navbar>
            <NavItem>
                <Link className="lnk" to='/logout'>Logout</Link>
            </NavItem>
        </Nav>
    </Navbar>
)

处理所有路由的文件如下（routes/index.js）：

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { AppHeader } from '../components';

export default () => (
    <BrowserRouter>
        <div>
            {
                localStorage.getItem('access-token') &&
                <div>
                    <AppHeader />
                </div>
            }
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>
)

主App只包含以下代码：

import React, { Component } from 'react';
import Routes from '../routes';
import '../style.css';

class App extends Component {

    render() {
        return (
            <div>
                <Routes />
            </div>
        )
    }
}

export default App;

我不想刷新页面，因为它违背了 SPA 的目的。我怎样才能做到这一点？

Answer 1

使路由成为有状态的组件。

import React from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import { AppHeader } from '../components';

class Routes {
   this.state = {loggedIn: false}
   componentDidMount() {
     if(localStorage.getItem('access-token')) {
        this.setState({loggedIn: true})
     }
     //attach an event listener to the window object for storage event. 
     $(window).on('storage',() => {
        if(localStorage.getItem('access-token')) {
          this.setState({loggedIn: true})
        }
     });
   } 
   render() {
     return (
      <BrowserRouter>
        <div>
            {
                this.state.loggedIn &&
                <div>
                    <AppHeader />
                </div>
            }
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>)
   }
}
export default Routes;

安装组件后，您正在监听 localStorage 更新。如果本地存储发生更改，它将根据需要更新组件的状态。