next.js：将数据传递到嵌套路由

Question

问题：

目前，我有一个动态路由，可以使用getServersideProps（）获取数据。在此页面中，有多个选项卡会根据状态（选择哪个选项卡）呈现不同的数据。

我希望从使用此页面上的多个选项卡过渡到使用嵌套路由。但是，我很难获得最初在这些嵌套路线中获取的数据。有没有有效的方法，而无需再次致电GetServersideProps（）？

我的预期设置看起来像这样，其中[PAGE]调用GetServersIdeProps（）：

[page].jsx
|_tab1.jsx
|_tab2.jsx
|_tab3.jsx

我的当前[page] .jsx，我想在其中使用可以访问这些道具的单独的嵌套页面（而不是基于状态渲染每个选项卡） ：

export default function Page(props) {
    const [currentTab, setCurrentTab] = useState("home");

    return (
        <div>
            <div id="tab1" onClick={() => setCurrentTab("home")}>
                home
            </div>
            <div id="tab2" onClick={() => setCurrentTab("posts")}>
                posts
            </div>
            <div id="tab3" onClick={() => setCurrentTab("info")}>
                info
            </div>

            {currentTab === "home" ? (
                <HomeTab props={props}/>
            ) : currentTab === "posts" ? (
                <PostsTab props={props}/>
            ) : (
                <InfoTab props={props}/>
            )}
        </div>
    );
}

我尝试

• 使用上下文API尝试在全球使用数据，而我的其他页面可以使用该数据。但是，这要求用户首先访问原始动态路线。
• 在每个嵌套路线上调用getServersideProps（）。尽管这有效，但我希望找到一个更好的解决方案，因为我在每个嵌套的路线上获取数据，而它们嵌套的路线已经有所有这些数据。

Answer 1

您可以使用 shallow路由 /docs/api-reference/next/router“ rel =“ nofollow noreferrer”> next/route 或 next/link

请注意，在下面的示例中，我使用next/link 进行演示。没有您的标签数据，我假设您在数据中有一系列标签

import { useEffect } from 'react'
import Link from 'next/link'

//the path is `/tab/:tabId`
function Tab({ data }) {
  const [tabData, setTabData] = useState(data[0]) //first tab data as default for example

  useEffect(() => {
    setTabData(data[tabId])
  }, [router.query.tabId])

  return <>
     <Link href="/tab/0" shallow />
     <Link href="/tab/1" shallow />
     <div>
        {tabData}
     </div>
  </>
}

export async function getServerSideProps(context) {
  return {
    props: {
       data: [], //tabs' data you fetched from the API
    }, 
  }
}

export default Tab