react配置

目录

路由

mock模拟请求

---

路由

安装

npm install react-router-dom react-router

创建src/routes/index.tsx文件

import {BrowserRouter, Route, Routes,} from "react-router-dom";
import React, {lazy, Suspense} from "react";
import {AliveScope} from "react-activation";

/**
 *  路由方法 自定义规则
 * @param routerList 路由列表
 * item.redirect 如果没有匹配到对应的路由 就重定向到404页面
 * Auth 判断token是否存在或者过期 如果是的 重定向到登录页面
 * @returns
 */
const About = lazy(() => import('../pages/about/index.tsx'))
const Home = lazy(() => import('../pages/home/index.tsx'))
const List = lazy(() => import('../pages/List/index.tsx'))
const Login = lazy(() => import('../pages/Login/index.tsx'))


const routes = [
    {
        path: '/',
        element: <Login/>,
    },
    {
        path: '/login',
        element: <Login/>,
    },
    {
        path: '/home',
        element: <Home/>,
        children: [
            {
                path: 'about',
                element: <About/>,
            },

            {
                path: 'list',
                element: <List/>,
            },
        ]
    },
];

const renderRouter = (routerList: []) => {
    return routerList.map((item, ind) => {
        const {path, children} = item;
        // 判断是否有子路由
        return (
            <Route key={path} path={path}
                   element={item.element}
            >
                {children && renderRouter(children)}
            </Route>
        )
    })
};

// 在函数组件中，使用 <BrowserRouter> 组件将整个应用程序包装起来，以启用路由功
// 渲染路由
// 使用 <Suspense> 组件包装路由配置。<Suspense> 组件是 React 提供的用于懒加载组件的机制，可在组件加载时显示一个回退（fallback）元素，以提供更好的用户体验.
const Routers = () => {
    {/* Routes代替Switch写法 */
    }
    return (
        <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                <AliveScope>
                    <Routes>
                        {renderRouter(routes)}
                    </Routes>
                </AliveScope>
            </Suspense>

        </BrowserRouter>
    );
};

// 通过 React.memo() 函数对 Routers 组件进行包装，以优化性能。React.memo() 是 React 提供的一个高阶函数，用于对纯函数组件进行浅比较的优化，以避免不必要的重新渲染。
export default React.memo(Routers);

配置App.tsx文件

import RootRoute from './routes/index.tsx';

import "./App.css"

const App = () => {
    return (
        <RootRoute></RootRoute>
    );
};
export default App;

配置main.tsx文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
)

完成！！！

mock模拟请求

安装

npm i mockjs axios -D

创建src/mock/user/index.ts文件

// src/mock/user/index.ts

import Mock from "mockjs"


Mock.mock('/api/home/list', 'get', {
    data: [
        {
            "key": "1",
            "name": "xxx",
            "age": "15",
            "address": "上海市"
        },
        {
            "key": "2",
            "name": "xxx",
            "age": "15",
            "address": "上海市"
        },
        {
            "key": "3",
            "name": "xxx",
            "age": "15",
            "address": "上海市"
        },
        {
            "key": "4",
            "name": "xxx",
            "age": "15",
            "address": "上海市"
        },
    {
            "key": "5",
            "name": "xxx",
            "age": "15",
            "address": "上海市"
        }, {
            "key": "6",
            "name": "xxx",
            "age": "15",
            "address": "上海市"
        }
    ]
})

创建src/mock/index.ts   

// src/mock/index.ts

export  * from './user'

创建src/api/user/index.ts文件

// src/api/user/index.ts

/**
 * 用户列表
 * @returns {*}
 */
import axios from 'axios'
import '@/mock/user'

const instance = axios.create({
    timeout: 20000, // 超时时间
    headers: {'Content-Type': 'multipart/form-data'}
})


export function getUserListApi() {
    return instance({
        url: '/api/home/list',
        method: 'get',

    })
}

 使用

引入
import {getUserListApi} from "@/api/user";

初始化
const [userList,setuserList] = useState([])

调用
const getUserList = async ()=>{
        const {data} = await getUserListApi()
        setuserList(data.data)
}

useEffect(()=>{
        getUserList()
},[])

完成！！！

源码地址