使用 NextJS Link，如何传递对象客户端？

Question

我有一个正在使用的 Link 组件，并且想要将一个 JavaScript 对象传递到我要链接到的新页面。似乎我可以传递原语，但不能传递对象。

也就是说，我想在下面做这样的事情，但我得到一个与 sessionData 关联的空字符串（session.id 和 session.sessionSlug 工作）。

                <Link
                    href={{
                        pathname: "/session", query:
                            {
                                sessionSlug: this.props.session.sessionSlug,
                                sessionId: this.props.session.id,
                                sessionData: this.props.session
                            }
                    }}
                    as={`session/${this.props.session.sessionSlug}`}>
                    <a>{this.props.session.title}</a>
                </Link>

https://nextjs.org/docs/#with-link

Answer 1

我想你可以尝试JSON.stringify这个对象然后JSON.parse它回来

例子

页面/index.js

import Link from 'next/link';

export default () => {
  const object = {
    key1: 'value1',
    key2: 'value2'
  };

  return (
    <Link href={{ pathname: '/about', query: { object: JSON.stringify(object) } }}>
      <a>here</a>
    </Link>
  );
};

页面/about.js

import { withRouter } from 'next/router';

function About({ router: { query } }) {
  const object = JSON.parse(query.object);

  return (
    <div>
      about {object.key1} | {object.key2}
    </div>
  );
}

export default withRouter(About);

希望这可以帮助！