如何在盖茨比编程导航中添加路由器转换?

Question

在我的盖茨比网站上，

我有一个搜索栏，当单击建议时，handleClick运行并将它们导航到建议的页面。为了改变路线，我使用了navigate("/my-link").现在如何在盖茨比编程导航上添加路由器转换？

Answer 1

Gatsby在引擎盖下使用Reach路由器进行路由。

官方文档有一个关于如何对页面过渡进行动画处理的示例。

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