CODEWITHSUNDEEP
javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing
user51
user51

Reputation: 10233

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

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.

enter image description here

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

Any idea how to fix this?

Upvotes: 0

Views: 84

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 25080

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

  1. params

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

  2. searchParams

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

  3. 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 ,

  1. Either pass it as params 
    <Link href={`/SecondPage/${props.title}`}>{props.title}</Link>
  2. Or Receive it as searchParam 
     const query = new URLSearchParams(window.location.search);
 const content = query.get('content');

To further understand follow the below links

Upvotes: 0

Robin Thomas
Robin Thomas

Reputation: 4146

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>
  )
};

Upvotes: 0

Related Questions