Client side routing not working in NextJS

Question

Update: FIXED! I made a silly mistake because I had a [language]/folder and I forgot to provide the language in the href and query params.

I have the following pages;

pages/_app.js
pages/_document.js
pages/index.js
pages/order.js
pages/discover/[categoryId].js

Here is the order page. The client side routing only changes the url but not the content of the page. If I refresh the page I get the last content. So the server side routing works but the client side routing only changes the url and not the content.

import React from "react";
import Head from "next/head";
import Link from "next/link";

export default function Order() {
  return (
    <>
      <Head>
        <title>Orders</title>
      </Head>
      <div>
        <p>Put orders here</p>
        <Link href={"/"}>
          <a>Home</a>
        </Link>
        <Link href={"/discover/[categoryId]"} as={"/discover/0"}>
          <a>Orders</a>
        </Link>
      </div>
    </>
  );
}

Do I do something wrong or what could potentially cause this issue?

Next version: 9.5.0
React/React-dom: 16.13.1

It might be cached, have you tried to clean project and rebuild ? — Uladz Kha

bcjohn bcjohn · Accepted Answer · 2020-07-30T01:10:03

How about trying this way. I am using next 9.2.1, and it works fine.

<Link href={{pathname: "/discover/[categoryId]", query: { categoryId: 0 }}} as={"/discover/0"}>
  <a>Orders</a>
</Link>

Client side routing not working in NextJS

1 Answers