属性 `aria-current` 不匹配。服务器：“空”客户端：“页面”

Question

我正在使用 gatsby 为我的客户创建一个静态网站。目前，我正在使用 gatsby 的内置 router 设置网站的导航Link。路线工作正常，这意味着每次我单击导航菜单链接时，它都会将我带到预期的目标页面，并且页面也会正确呈现，但是我不断在控制台中收到此恼人的警告：Prop `aria-current` did not match. Server: "null" Client: "page"

以下是我设置路由器的方法：

import React from 'react'
import { navbar } from './navbar.module.css'
import { Link } from 'gatsby'


const Layout = ({children}) => {
    return (
        <>  
            <Navbar />
            <main>
                {children}
            </main>
            <footer>@COPYRIGHT 2021. ALL RIGHTS RESERVED.</footer>
        </>
    )
}


const Navbar = () => {
    
    return (
        <div>
            <nav className={navbar}>
                <Link to='/'>
                    <h1>mel king</h1>
                </Link>
                <ul>
                    <li>                    
                        <Link to='/author' >author</Link>
                    </li>
                    <li>
                        <Link to='/books' >books</Link>
                    </li>
                    <li>
                        <Link to='/contact' >contact</Link>
                    </li>
                </ul>
            </nav>
        </div>
    )
}

//#####
// gatsby config:
//#####

module.exports = {
  siteMetadata: {
    title: "Mel King",
  },
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        icon: `src/images/icon.png`,
        name: `Mel King`,
        short_name: `Mel King`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    "gatsby-plugin-netlify-cms",
    "gatsby-plugin-sass",
    "gatsby-plugin-sharp",
    "gatsby-plugin-offline",
    "gatsby-transformer-sharp",
  ],
};

请问您对修复有何想法？

Answer 1

禁用DEV_SSR标志对我有用。您可以通过在文件中将其设置为 false 来禁用该标志gatsby-config.js：

flags: {
 DEV_SSR: false
}