0

I am trying to create a route that looks like this /property1=value1&property2=value2 and then I need to access the values of property1 and property2. I created a file named [property1]&[property2].js in the root of pages folder.

I am trying to access the component via the following link http://localhost:3000/property1=value1&property2=value2

//[property1]&[property2].js

import { useRouter } from "next/router";

const Component = () => {
  const router = useRouter();

  return (
    <div>
      HELLO WORLD
    </div>
  );
};

export default Component ;

I tried to test the content of router.query and obtained following output.

console.log(router.query); 
//outputs { property1]&[property2: "property1=value1&property2=value2" }

I am using the next.js version 13.3.1 and for the moment I don't prefer to use the experimental apps directory as per docs. So any solutions to achieve this task via pages directory would be most preferred for now.

Rifky Niyas
  • 1,737
  • 10
  • 25

2 Answers2

0

You should be able to do this

const {query} = router;
const {property1, property2} = query;

See docs

rguarascia.ts
  • 694
  • 7
  • 19
0

I am trying to create a route that looks like this /property1=value1&property2=value2 and then I need to access the values of property1 and property2

Based on what are trying to achieve

I created a file named [property1]&[property2].js in the root of pages folder.

[property1]&[property2].js is not the best way to do it.

If i'm not getting it wrong, you want to pass search params in the url and access them in your component here on the route '/'.

How to proceed ?

NextJs 13 new useSearchParams hook API

  1. Rename the file [property1]&[property2].js to index.js (assuming that it on the root path /)
  2. Now you can pass the query params to the url example: /?property1=value1&property2=value2
  3. Access these query params in your comppnent using the useSearchParams hook

useSearchParams is a Client Component hook that lets you read the current URL's query string.

  import { useSearchParams } from 'next/navigation';
  export default function SearchBar() {
    const searchParams = useSearchParams();
  
    const search = searchParams.get('search');
  
    // URL -> `/dashboard?search=my-project`
    // `search` -> 'my-project'
    return (
      <>Search: {search}</>
    );   
  }

Example

// index.js
import { useSearchParams } from 'next/navigation';

const Component = () => {
  const searchParams = useSearchParams();
  const property1 = searchParams.get('property1');
  const property2 = searchParams.get('property2');

  console.log(property1);   // value1
  console.log( property2); // value1
  return (
    <div>
      HELLO WORLD
    </div>
  );
};

export default Component ;

Using the useRouter hook

You can Also use the useRouter hook to access the query params in your component:

  const Component = () => {
    const router = useRouter();
    const { property1, property2 } = router.query;
  
    console.log(property1);   // value1
    console.log(property2);   // value2
  
    return (
      <div>
        HELLO WORLD
      </div>
    );
  };
  
  export default Component;

EDIT

I think you misunderstood how to use dynamic routing in Next.js. If you want to make property1 and property2 mandatory in order to access the page you need to have a url that's look like this /[property1]/[property2] where property1 is a folder on the pages that contains a js file named property2.js. then you can access their value by using

// file pages/[property1]/[property2].js
import {useRouter} from "next/router";

export default function IndexPage() {
  const router = useRouter();
  const { property1, property2 } = router.query;
  return (
    <div>
      <p>
        property1: {property1} <br />
        property2: {property2}
      </p>
    </div>
  );
}

enter image description here

Faouzi Mohamed
  • 143
  • 8
  • Hey, this seems an excellent option to give a shot. I just got two problems. 1- is the `useSearchParams` hook currently well supported to be deployed on production? 2- I am infact trying to redirect the user to another page upon submitting a form in index page. That is the reason why I created a separate file (in order to have a separate route). Can `useSearchParams` hook approach be modified to fit this requirement? And as I mentioned in the question, `property1` and `property2` both return `undefined` when logged to console in the current approach using `useRouter()` hook – Rifky Niyas Apr 27 '23 at 13:32
  • > property1 and property2 both return undefined when logged to console in the current approach using useRouter() hook. It's because they are not considered as query params since they are not preced by a question mark on the url. You are doing this -> ` /property1=value1&property2=value2` instead of this (notice here the question mark '?') -> ` /?property1=value1&property2=value2` – Faouzi Mohamed Apr 27 '23 at 13:42
  • About `useSearchParams ` i've been using it on production since a while on side project both on the app directory and pages directory and i haven't yet found an issue with it. – Faouzi Mohamed Apr 27 '23 at 13:45
  • Got it. Thank you. Btw, when I add a question mark to the URL as follows `http://localhost:3000/?youtube_id=8pDqJVdNa44&session_id=123` I am landing on the index page rather than the required `[property1]&[property2]` page. How to fix it? and also can you suggest a way to use `useSearchParams` to redirect the user to a separate page with the URL `http://localhost:3000/property1=value1&property2=value2` and access these values on that file – Rifky Niyas Apr 27 '23 at 14:41
  • I have a edited the response for the case you want to have property1 and property2 mandatory. – Faouzi Mohamed Apr 27 '23 at 15:16
  • useSearchParams allow you to access the search params. If you want to make a redirection you can use the `router.push(url)` to redirect to an other page – Faouzi Mohamed Apr 27 '23 at 15:21