reactjs - Prop `aria-current` 不匹配。服务器 : "null" Client: "page"

Question

我正在使用 gatsby 为我的客户创建一个静态站点。目前，我正在使用 gatsby 的内置路由器 Link 设置站点的导航。路由正常工作，这意味着每次我单击导航菜单链接时它都会将我带到预期的目标页面并且页面也正确呈现但是我一直在控制台中收到这个烦人的警告:Prop `aria-current`不匹配。服务器:“空”客户端:“页面”

这是我设置路由器的方式:

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 标志对我有用。您可以通过在 gatsby-config.js 文件中将其设置为 false 来禁用该标志:

flags: {
 DEV_SSR: false
}