使用 NextJS 链接，如何传递对象客户端? [英] With NextJS Link, How to pass object clientside?

问题描述

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

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

 <链接href={{路径名:/会话"，查询:{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></链接>

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

解决方案

我觉得你可以试试JSON.stringify 对象，然后是 JSON.parse 返回

例子

pages/index.js

从'next/link'导入链接；导出默认 () =>{常量对象 = {键1:'值1'，键2:'值2'};返回 (<链接href={{路径名:'/about'，查询:{对象:JSON.stringify(object)}}}><a>这里</a></链接>);};

pages/about.js

import { withRouter } from 'next/router';功能关于({路由器:{查询}}){常量对象 = JSON.parse(query.object);返回 (
关于 {object.key1} |{object.key2}</div>);}使用Router(关于)导出默认值；

希望这会有所帮助！

I have a Link component that I'm using and want to pass a JavaScript object to the new page I'm linking to. It seems that I can pass primitives, but not objects.

That is, I want to do something like this below but I get an empty string associated with sessionData (session.id and session.sessionSlug work).

                <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

解决方案

I think you can try to JSON.stringify the object and then JSON.parse it back

Example

pages/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>
  );
};

pages/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);

Hope this helps!

这篇关于使用 NextJS 链接，如何传递对象客户端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！