Redux如何扭曲动态路由nextjs

qf9go6mv  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(128)

我试图用redux提供程序来扭曲我的动态路由,但它告诉我,我的组件应该用redux提供程序来扭曲,我已经这样做了。
我的layout.tsx用于动态路由

blog->
   [slug]->
      page.js
      layout.tsx

export default function DynamicLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <Providers>
    <>
      
   
        {children}
       
      
       
    </>
    </Providers>
  )
}

字符串

ccrfmcuu

ccrfmcuu1#

您应该 Package 根级别的layout.tsx文件,而不是页面组件
为此,在您的app文件夹下添加一个名为redux-provider.tsx的文件

"use client";

import { PropsWithChildren } from "react";

import { Provider } from "react-redux";
import { store } from "../store/store"; // your store definitions

export default function ReduxProvider({ children }: PropsWithChildren<any>) {
    return (
        <Provider store={store}>
            {children}
        </Provider>
    );
}

字符串
在应用程序文件夹下添加一个名为provider.tsx的文件

"use client";

import { PropsWithChildren } from "react";

import ReduxProvider from "./redux-provider";

export default function Providers({ children }: PropsWithChildren<any>) {
    return (
        <ReduxProvider>
            {children}
        </ReduxProvider>
    );
}


在根级别的layout.tsx文件中,使用Providers Package 子参数

import React from "react";

import Providers from './provider';

export default function RootLayout({
   // Layouts must accept a children prop.
   // This will be populated with nested layouts or pages
   children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body>
                <Providers>
                    {children}
                </Providers>
            </body>
        </html>
    );
}

相关问题