react+vite来优化下每次使用hook函数都要引入的情况

前言：

       react项目中，每个页面都得引入react/react-dom等元素，就像uniapp的项目中得onload,onshow等生命周期一样，这里也可以用vite的插件：unplugin-auto-import 来解决我们每次都需要调用才能使用hook方法的问题。

安装：

npm i unplugin-auto-import

vite.config.js中配置

这里的引入react，对应的就是界面上的单

独引入的react/react-router-dom

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import AutoImport from 'unplugin-auto-import/vite';export default defineConfig({plugins: [react(),AutoImport({imports: ['react', // 自动引入 React 的 Hooks（如 useEffect, useState）'react-router-dom', // 自动引入 useLocation, useNavigate 等//{'react-i18next': ['initReactI18next', 'useTranslation']} //国际化使用],dts: true, // 生成类型声明文件（支持 TypeScript）//dts: 'types/auto-imports.d.ts', //也可以直接指定目录，会自动生成对应文件}),],
});

界面使用：之前需要这样引入，现在不引入可以直接用

import { useEffect, useState } from "react"
import { Navigate } from "react-router-dom";