reactjs 在NextJS 13中使用应用路由器在哪里添加上下文提供程序？

nhaq1z21 于 11个月前发布在 React

关注(0)|答案(1)|浏览(109)

在React中，你有这样的东西：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

字符串
你可以将Providers包裹在<App />周围，但是在NextJS v13.4+ app router中，这个并不存在。另外，当导入第三方库在context中使用时，我假设像useEffect/useState这样的东西会产生问题。在创建context provider`时有没有办法处理这个问题？

reactjs

来源：https://stackoverflow.com/questions/77496701/where-do-i-add-context-provider-in-nextjs-13-using-app-router

1条答案

按热度按时间

5n0oy7gb1#

问得好，很高兴你问了。
下面是我是如何做到的。让我们从“结束”开始，逐步向上，然后向下钻取。（然后我们将看看如何使用它们，即如何获取/设置Pages中的变量。）
因此，在根元素render处不使用<App />，而是使用RootLayout。这确实是由NextJS创建的，并存在于此：/App/layout.js

import './globals.css';
import { Providers } from './ContextProviders/Providers';

export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                <Providers>{children}</Providers>
            </body>
        </html>
    );
}

字符串
好了，这就是你的<Providers> Package 器，你可以在这里导入你自己的提供者或第三方提供者。
让我们来看看如何定义<Providers />。注意'use client'表示法，以防止在服务器组件上使用“客户端”第三方库的问题。注意多个Providers应该如何依次 Package 彼此。我在这里写了：/app/ContextProviders。

'use client';

import { UserProvider } from './UserProvider';
import { MyOtherProvider } from './MyOtherProvider';

export function Providers({ children }) {
    return <MyOtherProvider><UserProvider>{children}</UserProvider></MyOtherProvider>;

}

型
最后，让我们看看如何创建一个Provider。

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

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
    const [userID, setUserID] = useState('');

    useEffect(() => {
        // do stuff like setting userID
        // you might access a db or other service here
        setUserID('asdfasdf-asdf-asdf-asdf-asdfasdfasdf');
    }, []);

    return <UserContext.Provider value={{ userID, setUserID }}>{children}</UserContext.Provider>;
};

型
如果你对value为什么有双花括号感到困惑，它只是通过键值对（即对象字面量）赋值在代码中创建对象的简写。换句话说，语法糖较少，它是这样的：

return <UserContext.Provider value={{ userID: userID, setUserID: setUserID }}>{children}</UserContext.Provider>;

型
或者更明确地说，这：

const sharedValues = 
{ userID: userID, setUserID: setUserID }

return <UserContext.Provider value={sharedValues}>{children}</UserContext.Provider>;

型
那么，我们如何在页面中使用它呢？

// /app/page.js
import react, { useContext } from 'react';
import UserContext from './ContextProviders/UserProvider'

export default Page() {

const { userID, setUserID } = useContext(UserContext);

return (<div>Hello World! {userID} </div>)
}

型
如果您想了解更多关于Vercel团队的信息，请查看here。

赞(0）回复(0）举报 11个月前

我来回答

reactjs 在NextJS 13中使用应用路由器在哪里添加上下文提供程序？

1条答案

相关问题

热门标签

最新问答