CODEWITHSUNDEEP
javascriptreactjs
AlyaKra
AlyaKra

Reputation: 566

React : Hide menu on all sub pages

I'm using React-router in my application with something like this in my App.js

<Router>
                {location.pathname === "/welcome" ||
                location.pathname === "/login" ||
                location.pathname === "/registration" ||
                location.pathname === "/page/:id?" ? null : (
                    <div>
                        <Menu />
                        <Mobile />
                    </div>
                )}

                <Switch>
                    <Route exact path="/welcome" component={Welcome} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="/page/:id?" component={Page} />
                    <Route exact path="/settings" component={Settings}  />
                    <Route exact path="/dash" component={New}/>
                    <Route exact path="/customize/:id?" component={Home} />

                    <Route exact path="/" component={Dash} />
                    <Route component={New}  />
                </Switch>
            </Router>

When navigating to normal pages such as /welcome and /login the menu is effectively hidden, but when browsing to /page/:id? the menu is still appearing.

:id? is the custom id of the page. How to hide the menu while using a custom id ?

Upvotes: 2

Views: 374

Answers (1)

Viet
Viet

Reputation: 12787

Because location.pathname never is /page/:id?. It will look like /page/123. So we can update like this:

location.pathname.includes("/page") ? null : (<div>...</div>)

Upvotes: 2

Related Questions