Hide React Elements Based on Session Storage or Page

Question

I have React application which has a structure similar to the following.

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>
        );
    }
}

I do not want the login page to display the <NavBar /> element. I tried using the sessionStorage to get the userId and only display the navigation if the value is set. When I do this and go to the login page and the nav bar is not there. But when I log in, it's still not there. If I refresh however, it will appear.

I know one way to solve this is to make some sort of wrapper around the pages that do want the navigation, but I'd rather not have all of that code duplication, etc.

I feel this must be a common want, and I'm missing something dumb. Any help would be appreciated. I'm new to React so I don't follow everything that's going on here. Thanks.

Answer 1

I think your way of conditionally showing the NavBar is the right way. The question is how to trigger a state change so that the render method takes care of hiding and showing the NavBar, when you log in and out. I suggested maintaining a isLoggedIn state in your App component, and rendering the NavBar based on that, instead of directly accessing the SessionStorage. You could then use a custom event to update the state, when SessionStorage changes.

See this question for updating state based on Storage (in short, you fire and handle a custom event for storage changes): How to listen to localstorage in react.js

This might still be more code that you had hoped for, but it's more aligned with how React works, to derive the view (render) from component state.