Prop `aria-current` did not match. Server: "null" Client: "page"

Viewed 2066

I am creating a static site for my client using gatsby. Currently, I am setting up the site's nav using gatsby's built-in router Link. The routes work properly which means that it's taking me to the intended target page every time I click the nav menu link and the pages renders properly as well however I keep getting this annoying warning in the console: Prop `aria-current` did not match. Server: "null" Client: "page"

Here is how I have set up the router:

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",
  ],
};


Your thoughts about a fix, please?

1 Answers

Disabling DEV_SSR flag worked for me. You can disable the flag by setting it to false in your gatsby-config.js file:

flags: {
 DEV_SSR: false
}
Related