Dynamic Links are not passing props redirected components 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.query.content}
  </h1>
)};

The console.log prints {} in the console.

In the browser I'm getting error.

What I would like to see is Welcome to Page 1.

Any idea how to fix this?

Robin Thomas · Accepted Answer · 2023-08-20 01:10:23Z

0

Your pages/SecondPage.js is incorrect, because you are not receiving any props to it (which is why the console.log is {}). So props.url is undefined. Hence the error you are seeing.

If your use-case to display the content query param, you can do like this:

export default () => {
  const query = new URLSearchParams(window.location.search);
  const content = query.get('content');

  return (
    <h1>
      Welcome to {content}
    </h1>
  )
};

answered Aug 20, 2023 at 1:10

Robin Thomas

4,3262 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

blackgreen · Accepted Answer · 2024-09-30 22:25:11Z

0

Its just that you are confused with terms, let me explain

params

These are of type route/:id => Here id is param
searchParams

These are of type route?id => Here id is searchParam
param & searchParams

These includes both route/:id1?id2 => Here id1 is param & id2 is searchParam ``

So basically what you are trying to do is, pass searchParam and looking for param

Solution ,

Either pass it as params

<Link href={`/SecondPage/${props.title}`}>{props.title}</Link>

Or Receive it as searchParam

 const query = new URLSearchParams(window.location.search);
 const content = query.get('content');

To further understand follow the below links

edited Sep 30, 2024 at 22:25

blackgreen♦

46.9k29 gold badges171 silver badges162 bronze badges

answered Aug 20, 2023 at 6:06

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Collectives™ on Stack Overflow

Dynamic Links are not passing props redirected components while routing in nextjs13

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related