меню рендера рендеринга, когда путь не соответствует

Я использую response-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 в местоположении "/", но как я могу избежать его рендеринга TopMenuComponent, когда пользователь находится в пути/логина? Я всегда мог создать другой компонент и обернуть его, но я думаю, что это слишком много для этого.

Ответы

Ответ 1

React Router сопоставление path strings опирается на [email protected]^1.7.0.

В результате вы можете указать, что routes не должны отображаться для определенных путей, используя regular expressions.

Следующая реализация renders на всех paths, панели "/" и "/login":

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

Ответ 2

Regex на маршруте не работал для меня. Это сработало для меня. Просто добавьте другое условие.

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

Ответ 3

Если вы не хотите использовать регулярные выражения напрямую, вы можете разместить свой логин Route в Switch с верхним компонентом меню Route. Он будет запускать только первый сопоставляемый Route и маршруты, если атрибут пути не соответствует чему-либо.

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

Ответ 4

Взял Regex от 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: fooobar.com/questions/7287703/...

Ответ 5

Аналогичен ответу Тейлора Мичелса, но следующие маршруты относятся к маршрутам '/login' и '/' (root):

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

Это также отображает компонент в виде тега jsx <TopMenuComponent/>, который работает для меня там, где другой подход не сработал.