javascript - Pass object to query on Router.push NextJs - Stack Overflow

admin管理员组

文章数量:1289490

Im new to NextJs and im trying to pass an object to another page through a ponent. I'll post the code and explain better what im trying to do:

The object is like this:

objectEx = {
  name: 'name',
  description: 'description'
}

This is the main ponent: Im trying to pass the object in the Router.push

export default class ComponentDummy extends Component {

  handleSubmit = value => e => {
    e.preventDefault()
    Router.push({
      pathname: '/OtherPage'
      query: { **PASS AN OBJECT HERE** } //what im trying is: query: { objectEx: objectEx},
    }
  }
}

This is the page that im trying to receive the object in query

const OtherPage = ({ query }) => {
  return( 
    <div> 
      Do Stuff with the object here
    </div>
  )
}

OtherPage.getInitialProps = ({ query }) => {
  return { query }
}

Then on the page above im trying to access the object like:

query.objectEx.name

This is not working as I thought I would. How can I achieve that?

Thanks in advance

Im new to NextJs and im trying to pass an object to another page through a ponent. I'll post the code and explain better what im trying to do:

The object is like this:

objectEx = {
  name: 'name',
  description: 'description'
}

This is the main ponent: Im trying to pass the object in the Router.push

export default class ComponentDummy extends Component {

  handleSubmit = value => e => {
    e.preventDefault()
    Router.push({
      pathname: '/OtherPage'
      query: { **PASS AN OBJECT HERE** } //what im trying is: query: { objectEx: objectEx},
    }
  }
}

This is the page that im trying to receive the object in query

const OtherPage = ({ query }) => {
  return( 
    <div> 
      Do Stuff with the object here
    </div>
  )
}

OtherPage.getInitialProps = ({ query }) => {
  return { query }
}

Then on the page above im trying to access the object like:

query.objectEx.name

This is not working as I thought I would. How can I achieve that?

Thanks in advance

• javascript
• reactjs
• react-router
• next.js

Share Improve this question Follow asked Mar 1, 2020 at 5:27 kivulkivul 1,1581313 silver badges2828 bronze badges 5

• This should help you stackoverflow./a/55182740/7785337 – Maniraj Murugan Commented Mar 1, 2020 at 5:50
• 1 Not really, as on the example they are passing a parameter and im trying to pass an entire object – kivul Commented Mar 1, 2020 at 13:15
• @kivul did you find a solution? I'm new to next as well, but wouldn't it work to pass the whole object to the query like so: Router.push({ pathname: '/OtherPage' query: myObj }) EDIT: But yeah, I guess it still won't work for nested fields.. – Zen-Ventzi-Marinov Commented May 10, 2020 at 0:03
• 1 @ZenVentzi i didnt, i just passed a lot of fields instead :| – kivul Commented May 11, 2020 at 2:55
• This question is primarily opinion-based, please check stackoverflow./help/closed-questions – Brosky Samson Putra halim Commented Feb 22, 2021 at 9:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Well, first thing is you passed object as a query param.

Router.push({
      pathname: '/OtherPage'
      query: { data: objectEx} 
    }

So, in order to access the object in the OtherPage, you need to fetch this inside ponentDidMount.

ponentDidMount() {
let data = window.location.search;
console.log(data)
}

You are not allowed to pass Object as query param for next/router. You need to pass string

Router.push({
   pathname: '/OtherPage'
   query: { objectEx: JSON.stringify(objectEx) },
}

Keep in mind, that you'll need to parse it your self

const params = JSON.parse(decodeURIComponent(router.query.objectEx))

Better yet to use lib like qs for stringifying objects to URL params.

本文标签： javascriptPass object to query on Routerpush NextJsStack Overflow