javascript - Next.js - 如何使用 Provider 来包装路由并使用 Context 和 Hooks

Question

我在 create-react-app 中编写了类似于以下的代码，我想知道 next.js 的等效代码。下面的代码是我尝试拥有一个可用于所有页面的全局上下文。提供者包装链接。我没有收到任何错误。问题出在 about 页面内，当我期望上下文状态时，console.log(state) 返回未定义。我该如何解决这个问题？

谢谢。

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;

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;

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}

Answer 1

您可以移动<Provider>定制<App>初始化每个页面的组件。

pages/_app.js

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

更多信息here