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

发布时间：2020-12-15 20:49:47 所属栏目：百科来源：网络整理

导读：我正在使用react-router,我想在用户不在根目录而不在/ login路径中时呈现菜单组件.这就是我到目前为止所拥有的 Route path="/:subpath" component={TopMenuComponent} / div Route exact path="/" render={props = ( LoginContainer {...props} setTitle={th

我正在使用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}/>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!