مراحل تعریف و ایجاد ماژول در react

1- ایجاد پوشه اصلی ماژول در مسیر  src با نام ماژول (مثلا PKG)

2- ایجاد پوشه های زیر در داخل پوشه اصلی ماژول:

Services

Stores

Views

3- ایجاد کامپوننت صفحه فرود ماژول مثلا با نام  PKGIndex در داخل پوشه Views

4- تعاریف و اقدامات لازم برای دسترسی از صفحه اصلی برنامه به ماژول

اعمال تغییرات زیر در کامپوننت MainContent.js که در مسیر  src\Login\Views\Main قرار دارد:

کد زیر را به قسمت بالای کامپوننت اضافه کنید:

const PKGIndex = lazy(() => import(/* webpackChunkName: "PKG" */'PKG/Views/PKGIndex'));

افزودن case زیر به بلوک switch موجود در کد:

                    case 'PKGTest/PKGIndex.aspx':
                        return (
                            <><PKGIndex /></>
                        )

توجه داشته باشید مقدار PKGTest/PKGIndex.aspx برای زمانی است که ماژول از طریق منو یا فهرست ماژولها در صفحه اصلی فراخوان میشود و این مقدار بسته به ماژول از دیتابیس خوانده می شود

چنان نیاز باشد تا از هر جای دلخواهی از برنامه به مازول دسترسی داشته باشید ابتدا یک حالت با مقدار دلخواه (مانند قطعه کد زیر) تعریف کنید :

                    case 'PKG':
                        return (
                            <><PKGIndex /></>
                        )

و سپس کدهای زیر را برای مدیریت رویداد کلیک در جای مورد نظر استفاده کنید:

    const ClickTab = (e, name, Content, caption) => {
        e.preventDefault();
        if (name == 'Help') {          
            LoginActions.generateTempToken()(dispatch);
            setLink("Help/User.aspx?v=1")
          }
          else if (name == "Return")
            MainActions.setReturnSelected(1)(dispatch);
          else {
            MainActions.setSubMenuSelected(name, Content, caption)(dispatch);
            MainActions.setTabSelected(name, Content, caption)(dispatch);
        }
    }

و از کد زیر برای رویداد کلیک استفاده کنید:

onClick={(e) => ClickTab(e, 'PKG',UMMAINCONTENT,'تستی')}

مقدار پارامتر سوم می تواند یکی از مقادیری باشد که در بالای کامپوننت import شده است:

import { UMCONTENT, UMMAINCONTENT, UMFULLCONTENT } from 'constant/appConstant'

برای اتصال به سرور باید مراحل زیر را انجام داد:

1- تعریف مقدار ثابت PKG_API_URL  در globalConfig  داخل فایل index.html که در پوشه public قرار دارد:

<script>
    window.globalConfig = {
    .
    .
    PKG_API_URL:"https://91.98.119.99",
    .
    .
    }
</script>