默认从导出组件会导致Next.js在发生更改时硬刷新页面

拥有一个包含所有共享UI组件的index.tsx文件。导出页脚并导入到所有页面共享的共享Layout.tsx中会导致浏览器在我每次进行更改时刷新页面，而不是快速刷新。
基本上，我尝试默认导出并包含的每个组件都会在需要时导致此行为。
所有的子组件都工作得很好。当我不默认导出时，一切似乎都工作正常。
有什么解决办法或解决办法或原因吗？

/组件/用户界面/索引.tsx：

export { default as Alert } from "./Alert"
export { default as Footer } from "./footer"
export { default as Logo } from "./logo"
export { default as MainNavigation } from "./main-navigation"
export { default as MaxWidthWrapper } from "./max-width-wrapper"
export { default as PageAnimate } from "./page-animate"
export { default as ThemeSwitch } from "./theme-switch"

布局.tsx：

"use client"

import { MaxWidthWrapper, PageAnimate } from "@components/ui"

import { Footer, MainNavigation } from "@components/ui"

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <MainNavigation />
      <PageAnimate>
        <MaxWidthWrapper type="main">{children}</MaxWidthWrapper>
      </PageAnimate>
      <Footer />
    </>
  )
}

export default Layout

页脚.tsx：

"use client"

import { FaFacebook, FaTwitter, FaInstagram, FaYoutube } from "react-icons/fa"

import MaxWidthWrapper from "./max-width-wrapper"

import { SocialProps } from "types"

const Footer = ({ socialFields }: SocialProps) => {
  return (
    <MaxWidthWrapper
      container
      type="footer"
      className="flex flex-row items-center justify-between py-5 flex-nowrap"
    >
      <p className="text-xs">
        &copy; {new Date().getFullYear()} The Friendly Vegan24
      </p>

      <div className="flex justify-center space-x-3">
        <a
          target="_blank"
          rel="noreferrer"
          href="https://www.facebook.com"
          title="Instagram"
          className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
        >
          <FaFacebook className="w-4 h-4 text-midnight" />
        </a>

        <a
          target="_blank"
          rel="noreferrer"
          href="https://www.instagram.com"
          title="Facebook"
          className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
        >
          <FaInstagram className="w-4 h-4 text-midnight" />
        </a>

        <a
          target="_blank"
          rel="noreferrer"
          href="https://twitter.com"
          title="Twitter"
          className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
        >
          <FaTwitter className="w-4 h-4 text-midnight" />
        </a>

        <a
          target="_blank"
          rel="noreferrer"
          href="https://youtube.com"
          title="Twitter"
          className="flex items-center justify-center text-white rounded-full w-7 h-7 bg-sun sm:w-8 sm:h-8"
        >
          <FaYoutube className="w-4 h-4 text-midnight" />
        </a>
      </div>
    </MaxWidthWrapper>
  )
}

export default Footer

/页面/索引.tsx（主页）

import { NextSeo } from "next-seo"

import { ButtonProps } from "types"

import { Layout, SectionHeader } from "@components/sections"
import {
  Hero,
  InfoCard,
  Feature,
  Newsletter,
  BlogCard,
  Contact
} from "@components/blocks"
import { Grid, Section } from "@components/shared"

import HeroImage from "@images/hero.png"

const HomePage = () => {
  const HeroButtons: ButtonProps[] = [
    {
      id: 1,
      href: "/",
      text: "Get in touch!"
    },
    {
      id: 2,
      href: "/over-ons",
      text: "Over ons"
    }
  ]

  return (
    <Layout>
      <NextSeo
        title="Home"
        openGraph={{
          type: "website",
          url: "https://ffb-next-static.vercel.app",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec suscipit diam, ac scelerisque libero. Vestibulum sapien lorem, placerat quis orci id, tempor mattis felis.",
          images: [
            {
              url: "https://images.pexels.com/photos/1059823/pexels-photo-1059823.jpeg?auto=compress&cs=tinysrgb&w=1200&h=630&dpr=2",
              width: 1200,
              height: 630,
              alt: "We welcome you",
              type: "image/jpeg"
            }
          ]
        }}
      />

      <Hero
        funny
        buttons={HeroButtons}
        featuredImage={HeroImage.src}
        title="The Friendly Vegan"
        intro="Ruimte voor tekst om de bezoeker welkom te heten, of om te
            beschrijven wat je doet met je product of dienst."
      />

      <Section>
        <SectionHeader
          title="Onze werkzaamheden"
          text="Ruimte voor tekst om in te leiden welke stappen je hieronder gaat uitleggen. Bijvoorbeeld de waarden waar je bedrijf voor staat, of het proces wat je doorloopt."
        />

        <Grid>
          <InfoCard
            featuredImage="https://source.unsplash.com/1024x800/?food?1"
            title="Recepten"
            text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
          />

          <InfoCard
            featuredImage="https://source.unsplash.com/1024x800/?food?2"
            title="Catering"
            text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
          />

          <InfoCard
            featuredImage="https://source.unsplash.com/1024x800/?food?3"
            title="Workshops"
            text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
          />

          <InfoCard
            featuredImage="https://source.unsplash.com/1024x800/?food?4"
            title="Duurzaamheid"
            text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas natus commodi repellendus."
          />
        </Grid>
      </Section>

      <Section>
        <Feature />
      </Section>

      <Section className="bg-sun sm:bg-transparent">
        <Newsletter />
      </Section>

      <Section>
        <SectionHeader
          buttonLink="/blog"
          buttonText="Naar alle artikelen"
          title="Blog"
          text="Ruimte voor tekst om in te leiden welke stappen je hieronder gaat uitleggen. Bijvoorbeeld de waarden waar je bedrijf voor staat, of het proces wat je doorloopt."
        />

        <Grid className="grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 pb-14">
          <BlogCard image="https://source.unsplash.com/1024x800/?food?8" />
          <BlogCard className="text-midnight bg-primary" />
          <BlogCard className="text-midnight bg-neutral" />
        </Grid>
      </Section>

      <Section className="bg-sun sm:bg-transparent">
        <Contact />
      </Section>
    </Layout>
  )
}

export default HomePage

默认从导出组件会导致Next.js在发生更改时硬刷新页面

1条答案

相关问题

热门标签

最新问答