Context | Notion

在react裡，元件間的資料主要是靠props來傳遞，然而，當元件越來越多的時候，這樣的傳遞就會過於複雜，這時候就可以利用context來分享資料。在Routing 裡，我們介紹了ThemeProvider，其實，ThemeProvider就是利用context。當然，也可以使用更複雜的Redux/Recoil來達成這樣的效果，不過，多數的情況下，Context就能解決問題了。

產生Context

createContext

我們可以利用Context來記錄使用者是否已經登入以及使用者的權限。

首先，我們需要利用createContect()寫一個Context:

先寫一個/app/account/AuthContext.tsx

import { createContext } from "react";
export const AuthContext = createContext('email');

在React裡，我們會把Context套在App.js，但是，在Next.js裡，並沒有App.js，在Next.js 13裡，如同ThemeProvider的使用方式一樣，我們利用layout.tsx來套用:

  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <AppRouterCacheProvider>
          <ThemeProvider theme={theme}>
            **<AuthContext.Provider value="email">**
              <Menu/>
              {children}
            **</AuthContext.Provider>**
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );

記得，在layout.tsx裡要import AuthContext

import { AuthContext } from "@/app/account/AuthContext";

也可以用相對路徑的寫法:

import { AuthContext } from "./account/AuthContext";

我們會看到這個錯誤訊息，因為Context只適用在client component，然而，layout.tsx不是:

Untitled

所以，需要利用Provider來解決這問題。