Link component reloads the whole page in the new version(9)

Bug report

Describe the bug

The Link component reloads the whole page after migrating to NextJS 9, and using the new dynamic routing APIs.

This is how i used the Link component before

<Link
  href={{
    pathname: "/news",
    query: { id: props.id }
  }}
  prefetch
>
    <a className={classes.link}>{props.title}</a>
</Link>

and this is after migration:

<Link href={`/news/${props.id}`}>
  <a className={classes.link}>{props.title}</a>
</Link>

and this the page folder:

pages
  news
    [id].js

this is the content of [id].js

import React from "react";
import SingleNews from "../../components/SingleNews";

const News = ({ id }) => {
  return <SingleNews id={id} />;
};

News.getInitialProps = async ({ query }) => {
  return { id: query.id };
};

export default News;

Expected behavior

For the Links to transition smoothly to other pages

System information

• OS: Kubuntu
• Browser: chrome
• Version of Next.js: 9

[delbaoliveira]

Hi @yassinebridi, this is not a bug. href in <Link> refers to the path inside your ./pages directory -https://github.com/zeit/next.js#dynamic-routing

Try this

<Link href="/news/[id]" as={`/news/${props.id}`}>
  <a className={classes.link}>{props.title}</a>
</Link>

[yassinebridi]

thanks @delbaoliveira, that worked perfectly.