React18+React-router-domV6+and5前端脚手架

一、脚手架目录

二、路由配置

1、JSON路由树示例：

js 复制代码

import {lazy} from 'react'
import BasicLayout from '@layout/index.jsx';

export const store_routes = [
    {
        path: '/personal',
        isLazy:true,
        component:lazy(() => import('@pages/personal/index.jsx')),
    },
    {
        path: '/roleConfig',
        isLazy:true,
        component: lazy(() => import('@pages/roleConfig/index.jsx')),
    },
    {
        path: '/routeConfig',
        isLazy:true,
        component: lazy(() => import('@pages/routerConfig/index.jsx')),
    },
    { from: '*',to: '/404'}
]

const getRouter = (routes) => {
    const router = [
        {
            path: '/login',
            isLazy:true,
            component: lazy(() => import('@pages/HomePage/index.jsx'))
        },
        {
            path: '/404',
            isLazy:true,
            component: lazy(() => import('@component/NoFound/index.jsx'))
        },
        {
            path: '/',
            isLazy:false,
            component: BasicLayout,
            children: [
                ...store_routes
            ]
        },
    ]
    return router;
}
export default getRouter;

2、使用React-router-domV6针对JSON路由树进行路由配置

js 复制代码

import React, { Suspense } from 'react'
import { HashRouter as Router, Route, Routes, Navigate } from 'react-router-dom'
import getRouter from './router';
import { Loading } from '@component/index'

const renderRouter = (routes) => {
  if (!routes) {
    return null
  }
  return (
    <>
      {
        routes.map((route, index) =>
          route.path ? (
            <Route
              key={index}
              path={route.path}
              element={
                route.isLazy ? (
                  <Suspense fallback={<Loading />}>
                    <route.component />
                  </Suspense>
                ) : (
                  <route.component />
                )
              }
            >
              {route.children && renderRouter(route.children)}
            </Route>
          ) : (
            <Route
              key={index}
              path={route.from}
              element={<Navigate to={route.to} replace />}
            />
          )
        )
      }
    </>
  )
}


const RouterConfig = ({ routerData }) => {
  return (
    <Router>
      <Routes>
        {renderRouter(getRouter(routerData))}
      </Routes>
    </Router>
  )
}
export default RouterConfig;

三、多语配置

1、创建对应的多语文件，例如：en.json、zh-cn.json和zh-hk.json，并文件中编写对应的多语，具体如下所示：

2、将多语文件引入并配置多语：

js 复制代码

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import translation_en from "@locales/language/en.json";
import translation_zh from "@locales/language/zh-cn.json";
import translation_hk from "@locales/language/zh-hk.json";


const resources = {
  en: {
    translation: translation_en,
  },
  cn: {
    translation: translation_zh,
  },
  hk: {
    translation: translation_hk,
  },
};
i18n.use(LanguageDetector) //当前浏览器语言
i18n.use(initReactI18next).init({
  resources,
  lng: '',
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

四、路由集成和多语组装

1、在containers目录下创建app.jsx集成路由并组装多语，示例如下：

js 复制代码

import React,{useEffect} from 'react'
import { ConfigProvider } from 'antd';
import { connect, Provider } from 'react-redux';
import RouterConfig from '@router/routerConfig';
import enUS from 'antd/es/locale/en_US';
import zhCN from 'antd/es/locale/zh_CN';
import zhTW from 'antd/es/locale/zh_TW';

import 'antd/dist/antd.css'
import '@locales/index.js'
import {setMobileCookie,geMobiletCookie} from '@utils/cookieSet'
import * as actions from '@locales/store/action';

const App = (props) => {
    useEffect(() => {
        let lang = geMobiletCookie('isCns') != null ? geMobiletCookie('isCns') : props.currentLocale
        setMobileCookie("isCns",  lang, 1)
        var intDate = props.getCurrentLocaleRequest(lang)
        return () => {
            clearInterval(intDate);
        }
    }, [])
    const locale = props.currentLocale == 'en' ? enUS  : props.currentLocale == 'cn' ? zhCN : zhTW;
    return (
        <ConfigProvider locale={locale}>
            <Provider store={props.store}>
                <RouterConfig/>
            </Provider>
        </ConfigProvider>
    );

}
const mapStateToProps = (state) => ({
    currentLocale: state.currentLocaleConfig.currentLocale,
})
const mapDispatchToProps = dispatch => ({
    // 获取当前语言
    getCurrentLocaleRequest(values) {
        dispatch(actions.getCurrentLocaleRequest(values))
    }

})
export default connect(mapStateToProps, mapDispatchToProps)(App)

2、初始渲染：将元素渲染到root，示例如下：

js 复制代码

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from '@containers/app.jsx'
import store from './store.js'

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App store={store} />);
// 热更新
if (module.hot) {
  module.hot.accept(err => {
    if (err) {
      console.error('module.hot，', err);
    }
  });
}