如何在Next.js中将数据从一个页面传递到另一个页面？

Question

如何在Next.js中将数据从一个页面传递到另一个页面？

32

我在使用Next.js构建一个基本的新闻应用程序，从新闻 API 获取get请求结果并正确地对其进行映射，但我卡在了将单篇文章传递到名为"singleNews"的新页面的问题上。那么我该如何实现呢？下面是获取所有10篇文章的代码：

export default function news({data}) {
    // const randomNumber = (rangeLast) => {
    //   return  Math.floor(Math.random()*rangeLast)
    // }
    // console.log(data)

    return (
        <>
        <div>
            <h1 className="heading">Top Techcrunch Headlines!</h1>
        </div>
        <div className={styles.newsPage}>
            { // here you always have to check if the array exist by optional chaining
             data.articles?.map(
                (current, index) => {
                    return(
                        <Card datas={current} key={index+current.author} imageSrc={current.urlToImage} title={current.title} author={current.author}/>
                    )
                }
            )
        }
        </div>
        </>
    )
}

export async function getStaticProps() {
    const response = await fetch(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${process.env.NEWS_API_KEY}&pageSize=12`)
    const data = await response.json() // by default Article length is 104
    // const articles =  data.articles;

    return{
        props : {
            data,
        }
    }
}

- Mohit Ashliya

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ivanatias · Accepted Answer

你可以通过以下方式将数据传递给另一个页面：Link 组件。

import Link from 'next/link'

<Link
  href={{
    pathname: '/to-your-other-page',
    query: data // the data
  }}
>
  <a>Some text</a>   
</Link>

然后在您的其他页面使用router接收该数据：

import { useRouter } from 'next/router'
const router = useRouter();
const data = router.query;

这也被称为将状态放入URL中。

更新 - Next.js v13+：

Next.js添加了一个新的app目录功能，默认使用React Server Components。自Next.js v13.4.1以来，app目录现在是稳定的，并且是使用该框架的推荐方式。 Link组件和useRouter钩子已经进行了一些更改。此外，还添加了一些用于客户端使用的新钩子。以下是这些更改的简要列表：

不再需要使用Link组件包装a标签。新的Link组件扩展了HTML的<a>元素。可以将<a>标签的属性作为props添加到Link中。例如，className或target="_blank"。这些属性将在渲染时传递给底层的<a>元素。
新的useRouter钩子应该从next/navigation导入，而不是next/router。
查询对象已被移除，并由useSearchParams()替代。

使用app目录功能和服务器组件将数据从一个页面传递到另一个页面：

import Link from 'next/link'

const SomePage = () => {
  return (
    <section>
      <h1>Some page</h1>
      <Link
        href={{
          pathname: '/anotherpage',
          query: {
            search: 'search'
          }
        }}
      >
        Go to another page
      </Link>
    </section>
  )
}

export default SomePage

通过searchParams属性接收数据：

const AnotherPage = ({ searchParams }) => {
  console.log(searchParams.search) // Logs "search"

  ...
}

export default AnotherPage

关于客户端组件：

'use client'

import { useSearchParams } from 'next/navigation'

const SomeClientComponent = () => {
  const searchParams = useSearchParams()
  console.log(searchParams.get('search')) // Logs "search"
 
  ...
}

export default SomeClientComponent

这也适用于位于“pages”文件夹上的页面组件。在这种情况下，不要包含“use client”指令。