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？我总是可以创建另一个组件并将其打包，但我认为仅此就太多了。

最简单的实现 使用或根据

位置.pathname

有条件地呈现组件，如下所示：

<Route 
    render={({ location }) => ['/', '/login'].includes(location.pathname)
        ? <Component/>
        : null
    }
/>

---

如果您不想直接使用正则表达式，可以将登录名

路由

放在带有顶部菜单组件

路由

的

开关

中。它将只运行第一个匹配的

路由

，没有路径属性的路由将匹配任何内容

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

(
)}
/>

---

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

路由路径中的Regex对我不起作用。对我有用的是这个。只需添加其他条件

 <Route render={({ location }) => {
     return location.pathname.indexOf('/login') === -1 ? TopMenuComponent : null 
  }} />

{
返回location.pathname.indexOf（'/login'）=-1？TopMenuComponent:null
}} />

从用户的答案中提取正则表达式

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

const notInLogin=/^（？。*（\/login））*$/
导出默认值（）=>(
)

---

如果出现PropsType错误：

类似于taylor michels的答案，但以下是“/login”和“/”（根）路由的原因：

location.pathname！==“/”&&location.pathname！==“/登录”？(
)：null
}
/>>

这还将组件呈现为jsx标记

，这在其他方法不适用的情况下对我有效。

您可以使用

constparentcomponent=props=>{
const matched=useRouteMatch（['/'，'/login']）
if（matched&&matched.isExact）返回null
返回
}

你可以尝试将你的

TopMenuComponent

嵌入一个三元运算符中，只有当

路径

不等于

'/'

或

'/login'

时才会显示它。但是这太多了，在进一步阅读后，我发现了以下内容，所以我需要一些能更好地理解regexp路径的东西。Try:

^（？。*（/|/login））.$

对于我来说，传递一个具有负外观的正则表达式，如果我尝试将其作为字符串传递，则它不起作用，但是如果我像这样将其作为正则表达式对象传递，则它确实起作用：

这和@vladvlad的解决方案都不可能。有关更多详细信息，请参阅此答案：@vladvlad@vitaliygorbenko如果这对您不起作用，请尝试转义斜杠

^（？.*（\/\/login））.$“

似乎不起作用：相同…必需的JSX

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

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

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

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