Link not functioning on existing pages

[impactcolor]

Next 9.3
Currently when I attempt to link to a page inside my pages directory, it does not work. In example
The following code:

<Link href="/products">
<a>Test</a>
</Link>

Should go to the page located in /pages/products.js but it does not. The url appears to change to localhost:3000/products but nothing gets loaded. When testing with this:

<Link href="/testMe">
<a>Test</a>
</Link>

It gives 404 because testMe does not exist. It appears when the page does exist that it's not routing to that page.

When I manually go to the browser url and input localhost:3000/products it does load the page.

[jamesmosier]

Could you provide a repository that reproduces this? I wasn't able to reproduce with the steps you outlined.

[impactcolor]

Hi @jamesmosier here goes the repo: https://github.com/impactcolor/nextjs
the page in question is shop.js in pages. You will see there these lines:

                <Link href="/products">
                <a>{key}</a>
                </Link>

Thank you!

[jamesmosier]

Inside your components/Layout.js file you have:

const [children, setChildren] = useState(props.children);

which will not work.

You need to instead just do:

const Layout = props => {
  return (
    <div>
      <Header />
      {props.children}
    </div>
  )
}

export default Layout;

[impactcolor]

You're awesome @jamesmosier THANK YOU!