隐藏基于会话存储或页面的 React 元素

Question

我的 React 应用程序的结构类似于以下内容。

class App extends Component {
    render() {
        return (
            <div className="App">
                <NavBar />
                <Router>
                    <Switch>
                        <Route path="/login" component={LoginPage} />
                        <Route path="/" exact component={DashboardPage} />
                        <Route path="/admin" exact component={AdminPage} />
                        // many other routes
                        <Route component={NotFound} />
                    </Switch>
                </Router>
            </div>
        );
    }
}

我不希望登录页面显示 <NavBar /> 元素。我尝试使用 sessionStorage 来获取 userId 并且仅在设置了该值时才显示导航。当我这样做并转到登录页面时，导航栏不存在。但是当我登录时，它仍然不存在。但是，如果我刷新，它就会出现。

我知道解决这个问题的一种方法是在确实需要导航的页面周围制作某种包装器，但我不想让所有这些代码重复等。

我觉得这一定是一个普遍的需求，我错过了一些愚蠢的东西。任何帮助，将不胜感激。我是 React 的新手，所以我没有关注这里发生的一切。谢谢。

Answer 1

我认为您有条件地显示 NavBar 的方式是正确的。问题是如何触发状态更改，以便 render 方法在您登录和注销时负责隐藏和显示 NavBar。我建议在您的 App 组件中维护 isLoggedIn 状态，并基于该状态呈现 NavBar，而不是直接访问 SessionStorage。然后，当 SessionStorage 更改时，您可以使用自定义事件来更新状态。

查看这个基于存储更新状态的问题（简而言之，您触发并处理存储更改的自定义事件）：How to listen to localstorage in react.js

这可能仍然是您所希望的更多代码，但它更符合 React 的工作方式，从组件状态派生视图（渲染）。

隐藏基于会话存储或页面的 React 元素

Hide React Elements Based on Session Storage or Page

session-storage

reactjs

react-router