Как добавить переход маршрутизатора в gatsby Programmati c навигации? - PullRequest
Новая
       20

Как добавить переход маршрутизатора в gatsby Programmati c навигации?

0 голосов
/ 11 января 2020

На моем веб-сайте gatsby,

У меня есть панель поиска, и когда нажимается предложение, запускается handleClick, и я перехожу на страницу с предложением. Для изменения маршрута я использовал navigate("/my-link"). Теперь, как я могу добавить переход маршрутизатора на Gatsby Programmati c навигации?

1 Ответ

0 голосов
/ 12 января 2020

Гэтсби использует Reach Router под капотом для маршрутизации.

В официальной документации есть пример о том, как анимировать переходы страниц. 

const App = () => (
  <div className="app">
    <nav className="nav">
      <Link to="/">Page 1</Link>{" "}
      <Link to="page/2">Page 2</Link>{" "}
      <Link to="page/3">Page 3</Link>{" "}
      <Link to="page/4">Page 4</Link>
    </nav>

    <FadeTransitionRouter>
      <Page path="/" page="1" />
      <Page path="page/:page" />
    </FadeTransitionRouter>
  </div>
);

const FadeTransitionRouter = props => (
  <Location>
    {({ location }) => (
      <TransitionGroup className="transition-group">
        <CSSTransition key={location.key} classNames="fade" timeout={500}>
          {/* the only difference between a router animation and
              any other animation is that you have to pass the
              location to the router so the old screen renders
              the "old location" */}
          <Router location={location} className="router">
            {props.children}
          </Router>
        </CSSTransition>
      </TransitionGroup>
    )}
  </Location>
);
...