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

Posted 2023-03-23

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

【英文标题】：How to show/hide reactstrap navbar in Reactjs Redux application?

【发布时间】：2018-10-24 22:39:01

【问题描述】：

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

请找到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 的目的。我怎样才能做到这一点？

【参考方案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 更新。如果本地存储发生更改，它将根据需要更新组件的状态。

【讨论】：

我把它做成了一个有状态的组件。将状态中的 isLoggedIn 标志初始化为 false。在成功登录时，我会将其设置为 true，并在注销时将其更新回 false。但是 componentDidMount 和 componentWillReceiveProps 都没有被调用。在用户之间的主要组件也被调用。所以，我想需要找到更好的解决方案。

如何结合 React Router 使用 HOC 模式？