Redux如何扭曲动态路由nextjs

qf9go6mv 于 2023-11-18 发布在其他

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

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

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

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

字符串

next.js

来源：https://stackoverflow.com/questions/77432963/redux-how-to-warp-dynamic-route-nextjs

1条答案

按热度按时间

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>
    );
}

型

赞(0）回复(0）举报 2023-11-18

我来回答

Redux如何扭曲动态路由nextjs

1条答案

相关问题

热门标签

最新问答