Question

我有 2 个带有动态路由的页面（父页面和子页面），我只想在子页面中调用 getServerSideProps()。第一页，[Post].js：

import React from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import Index from './index'

const Post = ({ children, making }) => {
    return (
        <Index>
            {making
                ? (
                    <div>
                        <p>Making ID is: {making.id}</p>
                        {children}
                    </div>
                )
                : (<p>Item not found</p>)}
        </Index>
    )
}

Post.propTypes = {
    children: PropTypes.node,
    making: PropTypes.object,
}

export const getServerSideProps = async ({ query: { makingID } }) => {
    const url = `http://localhost:1337/makings/${makingID}`
    const res = await axios.get(url)
    const making = res.data

    return { props: { making } }
}

export default Post

第二页（父页），[tabs].js：

import React from 'react'
import { useRouter } from 'next/router'

import Post from '../[Post]'

const tabs = () => {
    const router = useRouter()
    const { tabs } = router.query

    return (
        <Post>
          hello {tabs}
        </Post>
    )
}

export default tabs

但如果我使用 Post 作为组件，则 getServerSideProps() 不起作用。我可以在选项卡中使用该功能，但我只希望在孩子中使用它。

Answer 1

getServerSideProps 函数只能在页面中使用。您不能在组件中使用它。相反，您可以将获取的数据作为道具传递给页面组件。

此外，页面不能嵌套。如果页面共享相同的组件，那么您可以在两个页面中都包含这些组件。

如何在 Next.js 的嵌套页面中调用 getServerSideProps()？

1 个答案: