传 object 在 Router.push NextJs 上查询

Question

我是 NextJs 的新手，我试图通过组件将 object 传递到另一个页面。 我将发布代码并更好地解释我要做什么：

object是这样的：

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

这是主要组件：我试图在 Router.push 中传递 object

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},
    }
  }
}

这是我试图在查询中接收 object 的页面

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

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

然后在上面的页面上，我试图访问 object，例如：

query.objectEx.name

这不像我想的那样有效。 我怎样才能做到这一点？

提前致谢

Answer 1

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 componentDidMount.

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

Answer 2

不允许将 Object 作为 next/router 的查询参数传递。 你需要传递字符串

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

请记住，您需要自己解析它

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

最好使用像 qs 这样的 lib 将对象字符串化为 URL 参数。