Dynamic Links with url properties not passed while routing in nextjs13

Question

I'm learning nextjs using book "Building React Apps using server-side rendering"

In this I'm building basic react app with index page link to about page.

The project package.json -

{
  "name": "my-next-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "next",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^13.4.19",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

pages/index.js is -

import React from "react";
import GetLink from "../sharedComponents/DynamicRouter";

function MyComponent() {
  return (
    <div>
      <p>Hello from Next.js</p>
      <GetLink title='Page 1'></GetLink>
      <GetLink title='Page 2'></GetLink>
      <GetLink title='Page 3'></GetLink>
    </div>
  );
};

export default MyComponent;

sharedComponents/DynamicRouter.js is -

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

function GetLink(props) {
  return (
    <div>
      <Link href={'/SecondPage?content=${props.title}'}>{props.title}</Link>
    </div>
  );
}

pages/SecondPage.js is -

export default (props) => {

  console.log(JSON.stringify(props));

  return (
  <h1>
    Welcome to {props.url}
  </h1>
)};

When I click the page 1 like url it is redirected to is http://localhost:3000/SecondPage?content=${props.title} whereas I think it should redirected to http://localhost:3000/SecondPage?content=page1

Any idea how to fix this?

Answer 1

You have a mistake in your sharedComponents/DynamicRouter.js file.

You need to use `` (which are called backticks) instead of ''.

The reason is because variable expansion happens only when between ``.

I have fixed your code:

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

function GetLink(props) {
  return (
    <div>
      <Link href={`/SecondPage?content=${props.title}`}>{props.title}</Link>
    </div>
  );
}