CODEWITHSUNDEEP
reactjsnext.jsroutesnext.js13app-router
krishnaacharyaa
krishnaacharyaa

Reputation: 25080

How to pass props between routes in Nextjs App router

I am using App router and I want to pass parameters as object without using useParams & useSearchParams

If I were to have a object say person

const person: Person = {
  name: "John Doe",
  age: 25,
  address: "123 Main St",
};

I want to send person object from one route to another lets say from /home to /person

Persently as per my limited knowledge you can move from one route to another using

  1. router.push()
  2. Link's href

But I cannot see any argument were I can pass the complete object

Upvotes: 1

Views: 2862

Answers (2)

ttt
ttt

Reputation: 6829

Global state management is what you are looking for.

  • Simple: React Context API or Jotai
  • Complex: Redux

If you only want to avoid passing props down to deeply nested components and instead having access to certain props globally (userIsLoggedIn or something like that), then Redux is probably an overkill and Context API is the better option.

The advantage of React Context API over Jotai is that you don't have to install another package.

Upvotes: 0

Dreamer64
Dreamer64

Reputation: 1235

For me this works perfectly to pass objects to other components, plus it is a server side code, maybe it will help u:

in /home put it like this

export default function Home() { 

  var person: object = {
    name: "John Doe",
    age: 25,
    address: "123 Main St",
  };

  return ( 
    ...

    <Login myObj={person}/>

    ...
  )};

then in /person use it like this

export default function person(props : any) {

return (
   ... 
  
   <p {props.myObj.name}</p>
   <p {props.myObj.age}</p>
   <p {props.myObj.address}</p>

   ...
)};

Upvotes: 0

Related Questions