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?