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

我有一个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>
        );
    }
}

类应用程序扩展组件{
render（）{
返回(
//许多其他路线
);
}
}

我不希望登录页面显示

元素。我尝试使用sessionStorage获取

用户ID

，并且仅在设置值时显示导航。当我这样做并进入登录页面时，导航栏不在那里。但当我登录时，它仍然不在那里。但是，如果我刷新，它将出现

我知道解决这个问题的一种方法是在需要导航的页面周围做一些包装，但我不希望所有的代码都重复，等等

---

我觉得这一定是一个共同的愿望，我错过了一些愚蠢的东西。任何帮助都将不胜感激。我是个新来的反应者，所以我不了解这里发生的一切。谢谢

我认为您有条件地显示导航栏的方式是正确的。问题是如何触发状态更改，以便在登录和注销时，渲染方法负责隐藏和显示导航栏。我建议在应用程序组件中维护一个

isLoggedIn

状态，并基于该状态呈现导航栏，而不是直接访问会话存储。然后，当会话存储发生更改时，可以使用自定义事件更新状态

有关基于存储更新状态的信息，请参见此问题（简而言之，您触发并处理存储更改的自定义事件）：

---

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

您可以显示您尝试的代码，其中需要刷新吗？我基本上添加了

const navBar=sessionStorage.getItem（“userId”）：无效呈现

方法之前执行code>，然后将

替换为

{navBar}

。登录后我不得不刷新，因为仪表板页面没有显示导航栏。我考虑过将某个东西保持在

应用程序的状态，但我不知道该怎么做。既然
LoginPage
处理登录，它如何修改父
App
？我是否应该将提交功能移动到
应用程序
，然后将其传递到
登录页面
？否，我将在登录页面中保留登录逻辑。只需让LoginPage触发一个名为“SessionChanged”的自定义事件，并在应用程序的组件中监听该事件。