代码之家 › 专栏 › 技术社区 › Peter Kellner

使用nextjs链接,如何传递对象客户端?

next.js reactjs

Peter Kellner · 技术社区 · 7 年前

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

也就是说,我想在下面这样做,但得到了一个与sessiondata关联的空字符串(session.id和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

1 回复 | 直到 7 年前

iurii 7 年前

我想你可以试着 JSON.stringify 对象,然后 JSON.parse 它回来了

例子

页面/索引.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>
  );
};

页面/关于.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);

希望这有帮助!

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前