Javascript Next.js-如何使用Provider包装路由并使用带有钩子的上下文

我在createreact应用程序中编写了类似于以下内容的代码，我想知道next.js的等效代码。下面的代码是我试图创建一个可用于所有页面的全局上下文。提供者包装链接。我没有错误。问题出在控制台的about页面中。当我期望上下文状态时，log（state）返回undefined。我该如何解决这个问题

多谢各位

pages/index.js

import Link from "next/link";
import {Provider} from './Context';





function Index(){


    return(

        <div>
         <Provider>
          <ul>
             <li><Link href="/"><a>Home</a></Link></li>
             <li><Link href="/about"><a>About</a></Link></li>
          </ul>
          </Provider>
        </div>

    )
}

export default Index;

从“下一个/链接”导入链接；
从“./Context”导入{Provider}；
函数索引（）{
返回(



)
}
出口违约指数；

pages/about.js

import { useRouter } from 'next/router';
import {Context} from './Context';
import {useContext} from 'react';



const About= () => {

 const data = useContext(Context);
 console.log(data)

  return (
    <div>


      <p>This is the blog post content.</p>

    </div>
  );
};

export default About;

从“下一个/路由器”导入{useRouter}；
从“./Context”导入{Context}；
从“react”导入{useContext}；
const About=（）=>{
const data=useContext（上下文）；
console.log（数据）
返回(
这是博客帖子的内容

);
};
导出默认值约为；

pages/Context.js

import React, {createContext, useState, useEffect}from 'react';


let Context = createContext();

function Provider(props){

   const initialState = {
        userID: false,
        user:undefined,
        loading: true,
        authenticated:false
    }

    const [state,updateState] = useState(initialState)




  return(

    <Context.Provider value={{
        state:state
    }}>

      {props.children}
    </Context.Provider>

  )

}


const Consumer = Context.Consumer;
export {Provider, Consumer, Context}

import React，{createContext，useState，useffect}来自'React'；
让Context=createContext（）；
函数提供程序（props）{
常量初始状态={
userID:false，
用户：未定义，
加载：对，
认证：假
}
const[state，updateState]=useState（initialState）
返回(
{props.children}
)
}
const Consumer=Context.Consumer；
导出{提供者、使用者、上下文}

您可以将

移动到自定义

您可以将
移动到自定义
这个想法是您需要在树中的任何位置都有一个父级
提供者来使用上下文。在您的情况下，
提供者
不是
关于
组件的父级。你需要将你的
提供者
移动到
\u app.js
就像
一样，你的想法是你需要在树中的任何地方有一个父
提供者
来使用上下文。在您的情况下，
提供者
不是
关于
组件的父级。你需要将你的
提供者
移动到
\u app.js
就像我创建的
u app.js并粘贴你的代码一样。about.js中的登录状态仍未定义。我不确定我还应该做什么。等等……它不会呈现给DOM，尽管控制台日志给了我状态。你有什么见解吗？哪一部分不完全渲染？这也适用于ssr吗？我这边的问题是，如果我使用getServerSideProps打开视图，例如/dashboard，它应该从上下文中获取用户状态，如果我在登录后被路由到此页面，它会工作，但是如果我重新加载（初始页面加载），状态为空。@Tobi上下文未保存在服务器上，因此每个用户请求都将以空状态开始。您需要将用户状态存储在别处，并在getServerSideProps中检索它。about.js中的登录状态仍未定义。我不确定我还应该做什么。等等……它不会呈现给DOM，尽管控制台日志给了我状态。你有什么见解吗？哪一部分不完全渲染？这也适用于ssr吗？我这边的问题是，如果我使用getServerSideProps打开视图，例如/dashboard，它应该从上下文中获取用户状态，如果我在登录后被路由到此页面，它会工作，但是如果我重新加载（初始页面加载），状态为空。@Tobi上下文未保存在服务器上，因此每个用户请求都将以空状态开始。您需要将用户状态存储在别处，并在getServerSideProps中检索它。
import React from 'react'
import App from 'next/app'
import {Provider} from './Context';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Provider><Component {...pageProps} /></Provider>
  }
}

export default MyApp