React18+TypeScript最新

路由

随着react的版本不断更新，接触过vue的朋友，也应该能发现，二者也是越来越相似。
那在前端框架中，其实也都是互相影响，互相完善的过程。

在此也是主要介绍V6版本

"react-router-dom": "^6.4.2",

// 基础路由地址配置
const BaseRoutesConfig = () => {
    return useRoutes([
     // 重定向加载默认路由地址
        {
            path: "/",
            element: <Navigate to="/admin/welcome" replace/>
        },
        {
            path: "/admin",
            element: <AdminView/>,
            // 二级路由
            children: [
                {
                    path: "welcome",
                    element: <WelCome/>
                },
                {
                    path: "main",
                    element: <MainModule/>
                },
                {
                    path: "user",
                    element: <UserModule/>
                },
                {
                    path: "real",
                    element: <RealModule/>
                }
            ],
        },
        {
            path: "/map",
            element: <MapView/>
        },
        {
            path: "/login",
            element: <Login/>
        },
        {
            path: "/register",
            element: <Register/>
        },
        {
            path: "*",
            element: <Page404/>
        }
    ])
}


const routers = () => {
    return (
        <BrowserRouter>
            <BaseRoutesConfig/>
        </BrowserRouter>
    )
}


// 在使用的tsx文件中：、

// 路由配置
import BaseRoutesConfig from '@/router'

return(
	<>
		<BaseRoutesConfig/>
	</>
)



// 二级路由展示配置

import {Outlet} from 'react-router-dom';

export const OutletConfig = () => {
    return (
        <Outlet/>
    )
}

// 在二级路由页面
	<>
		<OutletConfig/>
	</>

redux

"react-redux": "^8.0.4",
"redux": "^4.2.0"

import {combineReducers} from "redux";
import {legacy_createStore as createStore} from 'redux';

// 加载下级模块
import admin from '@/store/reducers/admin'
import map from '@/store/reducers/map'

// 下级操作模块
const reducer = combineReducers({
    admin: admin,
    map: map,
})

// 创建仓库
const store = createStore(reducer);

// 导出仓库及配置
export default store;


// 以及在main.tsx中配置使用：
    <Provider store={store}>
        <App/>
    </Provider>

// 具体使用：

    const [number, setNumber] = useState(1)
    const counter = useSelector((state: any) => state.admin.counter)

	// 点击事件
    const handleChangeStoreCounter = () => {
        setNumber(number + 1)
        dispatch({
            type: adminActionType.addCounter,
            payload: { number }
        })
    }

// redux配置 reducer：
import {adminActionType} from "@/store/actions";

const adminReducer = (
    state: any = {
        counter: 0
    },
    action: {
        type: adminActionType,
        payload: any
    }
) => {

    const {payload} = action;

    switch (action.type) {
        case adminActionType.addCounter:
            state.counter = payload.number
            return state
        。。。。。
        default:
            return state

    }
}
export default adminReducer;

时间有限，暂时更新。

bye