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