Next js - Reloading with dynamic URL

I've created dynamic pages with Next js and Redux.

I have a simple flow about my web usage

1. Sign in

2. redirect to index.html using next/router.

3. click an <Link href="/DYNAMIC_PAGE"/>.

4. enter the /DYNAMIC_PAGE pages.

Every steps are working well, but there are some problems between step3 and step4.

When I clicked and <Link /> tag to /DYNAMIC_PAGE, It would be reloaded.

and it effects on my Redux states.

I want to avoid reloading when I enter the DYNAMIC_PAGES

If you need more details, please leave the comment.

Thank you in advance.

pages/[id].tsx

import * as React from "react";
import { NextPage } from "next";
import Layout from "components/Layout";
import Content from "components/courses/Content";
import axios from "axios";

const ExamplePage: NextPage = (props: any) => {
  return (
    <Layout title="About | Next.js + TypeScript Example">
      <Content
        {...props.course}
      />
    </Layout>
  );
};

ExamplePage.getInitialProps = async (props: any) => {
  const course = await axios
    .get(
      `MY_API_URL/${
        props.query.id
      }`
    )
    .then(res => res.data)
    .catch(e => e.response);
  return { course };
};

export default ExamplePage;

<Link href={`/${props.itemId}`}>
  <a className="Card">
    <div className="img-wrap">
      <img src={props.imageUrl || "/static/images/sampleImage.jpg"} />
    </div>
  </a>
</Link>