javascript - react : Hide menu on all sub pages

Question

我在我的应用程序中使用 React-router ，并在我的 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>

当导航到 /welcome 和 /login 等普通页面时，菜单实际上是隐藏的，但当浏览到 /page/:id? 菜单仍然出现。

:id? 是页面的自定义id。如何在使用自定义 ID 时隐藏菜单？

Answer 1

因为location.pathname从来都不是/page/:id?。它看起来像 /page/123。所以我们可以这样更新:

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