如何将自定义道具传递给 Next js 中的动态页面

Question

我有一个名为Card.js 的组件，只要点击卡片，它就会链接到动态页面。我需要将“类别”之类的值传递给动态页面[id].js，这样我就可以在那里做更多的逻辑。

卡片.js

import { useRouter } from "next/router";

import React from "react";

function Card({ id, post, category }) {
  const router = useRouter();

  const Redirect = (e) => {
    e.preventDefault();
    router.push(`/${id}`);
  };
  return (
    <div
      onClick={Redirect}
    >
      
    </div>
  );
}

export default Card;

[id].js

  function PostPage() {

  
    return (
      <>
        
      </>
    );
  }
  
  export default PostPage;

Answer 1

您可以使用router.push() 传递一个值，方法是将其添加到下一页的 url 查询中

const Redirect = (e) => {
    e.preventDefault();
    router.push({pathname: `/${id}`, query: { category: category }});
};

你可以通过useRouter在你的[id].js上使用它

import { useRouter } from 'next/router'

function PostPage() {
    const category = router.query.category // <--- category here
  
    return (
      <>
        
      </>
    );
}
  
export default PostPage;

Answer 2

您可以将其作为查询参数传递，然后从 url 获取参数

 router.push(`/${id}?props=${category}`)

喜欢这个

Answer 3

您可以在查询字符串参数中传递类别。 然后在您的组件中，您可以通过 router.query 读取它