路径不匹配时,react-router渲染菜单

我正在使用react-router,我想在用户不在根目录而不在/ login路径中时呈现菜单组件.这就是我到目前为止所拥有的

<Route path="/:subpath" component={TopMenuComponent} />
        <div>
            <Route
                exact path="/"
                render={props => (
                    <LoginContainer {...props} setTitle={this.setTitle} />
                )}
            />               
            <Route path='/landing' component={LandingComponent} />
        </div>

负责不在’/’位置渲染TopMenuComponent组件,但是当用户在/ login路径中时,如何避免它渲染TopMenuComponent？我总是可以创建另一个组件并将其包装起来,但我认为这对此来说太过分了.

React Router的 path strings匹配依赖于 Path To Regex.

因此,您可以使用regular expressions指示路由不为某些路径呈现.

以下实现在所有路径上呈现,条形“/”和“/ login”：

<Route path="^(?!.*(/|/login)).*$" component={TopMenuComponent}/>