отреагируйте маршрутизатор: используя меню на всех страницах, кроме главной страницы

Question

У меня есть сайт с меню на всех моих страницах, и я изменил главную страницу, так что теперь я больше не хочу это меню, но я все еще хочу его везде. Так что я думал о двух способах сделать это:

1. плохой путь: иметь <Menu /> на каждом компоненте, а не внутри маршрутов
2. не так уж и здорово способ: компонент <Menu /> не показывает себя, когда для маршрута задано "/"
3. . Хороший способ: каким-то образом использовать реактивный маршрутизатор dom, чтобы он был на всех маршрутах, кроме "/"

Я не могу понять, как реализовать 3., это возможно?

Answer 1

Вы можете использовать useLocation из react-router-dom. Как то так:

import { useLocation } from 'react-router-dom'

const Navigation = () => {
  const location = useLocation();
  if (location.pathname === '/') return null;
  return (
     <nav>
      <ul>
        <li><NavLink exact to="/" activeClassName="active">Page1</NavLink></li>
        <li><NavLink to="/page2" activeClassName="active">Page2</NavLink></li>
      </ul>
    </nav>
  );
}

const Routing = () => (
  <Router>
    <Navigation />
    <Switch>
      <Route exact path="/" component={MainApp} />
      <Route path="/page2" component={Page2App} />
    </Switch>
  </Router>
);

Answer 2

Используйте location.pathname из Route, чтобы не отображать его, если он соответствует указанному пути c.

const Menu = ({ location: { pathname } }) => {
  return pathname !== "/" && <div>MENU</div>;
};

или используйте useLocation ловушку из react-router-dom

const Menu = () => {
  const {pathname} = useLocation();
  return pathname !== "/" && <div>MENU</div>;
};

ПРИМЕЧАНИЕ: Убедитесь, что меню не отображается в Switch, поскольку они возвращают только первый соответствующий путь.

Answer 3

Поместите меню на страницу маршрутизатора и используйте условный рендер так:

window.location.pathname !== '/' &&
    <Menu />

... rest of the routing