Question

我正在使用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？我总是可以创建另一个组件并将其包装起来，但我认为这对此来说太过分了。

Answer 1

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

因此，您可以指示routes不使用regular expressions呈现某些路径。

所有renders，paths和"/"栏中的以下实施"/login"：

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

Answer 2

路由路径中的正则表达式对我不起作用。对我有用的是这个。只需添加其他条件即可。

RelativeLayout

Answer 3

如果您不想直接使用正则表达式，则可以将登录Route放在顶部菜单组件Switch的{{1}}中。它只会运行第一个匹配的Route，而没有path属性的路由会匹配任何内容。

Route

例如，您需要对div重新排序。

Answer 4

从Arman的答案中提取正则表达式。

const notInLogin = /^(?!.*(\/login)).*$/

export default () => (
  <Router history={history}>
    <>
      <Route path={notInLogin} component={NavBar} />
      <Switch>
        <Route exact path="/login" component={Login} />
        <Route exact path="/accounts" component={Account} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/" component={Home} />
      </Switch>
    </>
  </Router>
)

如果出现PropsType错误：https://stackoverflow.com/a/50439120/1099314

Answer 5

类似于泰勒·米歇尔的回答，但是以下原因同时说明了“ / login”和“ /”（根）路径：

<Route
   render={({ location }) =>
     location.pathname !== "/" && location.pathname !== "/login" ? (
       <TopMenuComponent />
     ) : null
   }
 />>

这还将组件呈现为jsx标记<TopMenuComponent />，在其他方法不起作用的情况下，它对我有用。

Answer 6

您可以使用useRouteMatch hook

const ParentComponent = props => {
  const matched = useRouteMatch(['/', '/login'])
  
  if (matched && matched.isExact) return null

  return <ChildComponent {...props} />
}

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

6 个答案: