Есть ли лучший способ скрыть компонент, используя реагирующий маршрутизатор?

Question

Чтобы скрыть панель навигации на домашнем компоненте, я делаю следующее

const NavbarComponent = (props) => {
    console.log(props);

    if (props.match.path === '/') {
        return null;
    } else
        return (

все работает нормально, мне нужен доступ к маршрутизатору, чтобы я мог отправлять людей в места, зависящие от объекта props, Есть ли лучший способ сделать это так, чтобы у меня все маршрутизаторы logi c в одном месте?

это текущее состояние моего маршрутизатора

    return (
        <div>
            <Router>
                <Route component={Navbar} />

                <Switch>
                    <Route exact path="/" component={Home} />

                    <Route exact path="/api/:city/electronics" component={Electronics} />
                    <Route exact path="/api/:city/labour" component={Labour} />

                    <Route exact path="/api/posts/item/:id" component={ItemDetails} />

                    <Route exact path="/create/:city/:category" component={CreatePost} />
                </Switch>
            </Router>
        </div>
    );

спасибо за ваше время .

Answer 1

Я не уверен, что понимаю, почему ваш NavBar компонент находится в своем собственном Route. Любые компоненты, содержащиеся в Маршрутизаторе, имеют доступ ко всему API маршрутизатора, включая Link - для этого им не обязательно должен быть Маршрут.

Я бы предложил обернуть все Маршруты, включающие NavBar, в этот компонент. Маршруты будут отображаться как дочерние элементы компонента Navbar.

Вот упрощенный пример:

// App.js
return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <NavBar>
            <Route exact path="/electronics" component={Electronics} />
            <Route exact path="/labour" component={Labour} />
          </NavBar>
        </Switch>
      </Router>
    </div>
  );

//NavBar.js
return (
    <>
      <div>
        <Link to="/electronics">Electronics</Link>
        <Link to="/labour">Labour</Link>
      </div>
      <div>{props.children}</div>
    </>
  );

codesandbox