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元素

1 个答案: