小编TST*_*ias的帖子

Problem

I am trying to use image optimization for local files inside the public directory in a SSG Next.js project.

There have been quite a few discussions on Github about introducing the possibility to use the next/image for image optimization at build time. However, at this moment, the next/image component does not work with the static site export.

See: https://github.com/vercel/next.js/discussions/19065

Solutions Attempts / Ideas

From what I could find, there are a few different actions that can be taken: …

React Router v6.4 引入了带有createBrowserRouter和RouterProvider的新路由 API 。

在旧版本的 React Router 中，可以环绕使用 React Router 定义的路由以启用页面转换。当提供位置和关键点的值时，Framer Motion 可以检测是否在组件树中添加或删除了子组件以显示开始和退出过渡动画。

在 React Router v6.4 之前：

<AnimatePresence exitBeforeEnter>
  <Routes location={location} key={location.pathname}>
    <Route path="/" element={<HomePage />} />
  </Routes>
</AnimatePresence>

虽然页面加载时的动画仍然适用于新的路由 API，但我找不到让退出动画再次工作的方法。

反应路由器 v6.4.1

...
const router = createBrowserRouter([
    {
      path: '/',
      element: (
         <HomePage />
      ),
    },
]);
...


<AnimatePresence mode="wait">
  <RouterProvider router={router} />
</AnimatePresence>

这是使用旧版本的 React Router 和 Framer Motion 的完整 React 应用程序的示例。