Nextjs TypeScript useContext 通过页面

Question

---

Edit:

I was not using

import Link from 'next/link';

in my Header.tsx component.

Now it works.

---

Don't know what I am doing wrong right here. I try to make global state (to indicate if user is logged in or not) that just flows through the pages and I try to do it with react's hook useContext.

It is not working like how I would like to make it work. When I toggleLogged and go to another page, the context has default value and not the changed one. I think the problem I am facing is something really small or a fundemantal thing that I just can't see.

Here is how my UserContext.ts file looks:

import { createContext, useContext } from 'react';

type userContextType = {
  isLogged: boolean;
  toggleLogged: () => void;
};

const userContextDefault: userContextType = {
  isLogged: false,
  toggleLogged: () => {},
};

export const UserContext = createContext(userContextDefault);

export function useUserContext() {
  return useContext(UserContext);
}

Here is my Layout.tsx :

import React, { useState } from 'react';
import Header from './Header';

const Layout = (props: any) => {
  const { children } = props;

  return (
    <div className='container'>
      <Header />
      {children}
    </div>
  );
};

export default Layout;

And lastly here is my _app.tsx :

import type { AppContext, AppProps } from 'next/app';
import Layout from '../components/Layout';
import { useState } from 'react';
import { UserContext } from '../components/UserContext';

import '../styles/globals.css';

const MyApp = ({ Component, pageProps }: AppProps) => {
  const [isLogged, setIsLogged] = useState(true);
  const toggleLogged = () => {
    setIsLogged((isLogged) => !isLogged);
  };

  return (
    <UserContext.Provider value={{ isLogged, toggleLogged }}>
      <Layout>
        <Component {...pageProps} />;
      </Layout>
    </UserContext.Provider>
  );
};

export default MyApp;

Thanks for any help in advance.

Answer 1

You need to return the provider in the context, and then reference the instance in _app.js.

Here's my AuthContext (as an example). Don't worry about the specific code, but use my implementation as the foundation, and you'll be up and running in no time!

import { createContext, useContext, useEffect, useState } from 'react'
import { auth } from '../firebase'

const AuthContext = createContext()

export function useAuth() {
  return useContext(AuthContext)
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState()
  const [loading, setLoading] = useState(true)

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  function signOut() {
    return auth.signOut();
  }

  function signUp(email, password) {
    return auth.createUserWithEmailAndPassword(email, password)
  }

  function getUser() {
    return auth.currentUser
  }

  function isAdmin() {
    return auth.currentUser.getIdTokenResult()
    .then((idTokenResult) => {
      if (!!idTokenResult.claims.admin) {
        return true
      } else {
        return false
      }
    })
  }

  function isEditor() {

  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
      setLoading(false)
    })

    return unsubscribe
  }, [])

  const value = {
    currentUser,
    getUser,
    login,
    signOut,
    signUp
  }

  return (
    <AuthContext.Provider value={value}>
      { !loading && children }
    </AuthContext.Provider>
  )

}

My _app.js file:

import '../styles/globals.scss'
import { motion, AnimatePresence } from 'framer-motion'
import { useRouter } from 'next/router'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { AuthProvider } from '../contexts/AuthContext'
import { CartProvider } from '../contexts/CartContext'
import { ThemeProvider } from '@material-ui/core'
import theme from '../styles/theme'


export default function App({ Component, pageProps }) {
  const router = useRouter()

  return(
    <AnimatePresence exitBeforeEnter>
      <CartProvider>
        <AuthProvider>
          <ThemeProvider theme={theme}>
            <Header />
            <motion.div key={router.pathname} className="main">
              <Component { ...pageProps } />
              <Footer />
            </motion.div>
          </ThemeProvider>
        </AuthProvider>
      </CartProvider>
    </AnimatePresence>
  )
}