vite 搭建 react18 项目

1.1.用脚手架生成react+vite+ts项目 默认创建的就是 react18

pnpm  create vite app-client --template react-ts

1.2 配置 resolve.alias  配置别名

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

 配置 tsconfig.json 即可解决

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

 配置代理 可以进行跨域和自动打开可以实现跨域

server: {
    host: '0.0.0.0',//使用当前的IP地址，没有这个就是以localhost作为本地地址;
    port: 10086, //端口号为3000;
    open: true, //是否在默认浏览器中自动打开该地址,
    // 跨域设置允许
    cors: true,
    // 如果端口已占用直接退出
    strictPort: true,
    
    proxy: { //使用代理
      '/api': { //当有 /api开头的地址是，代理到target地址
        target: '', // 需要跨域代理的本地路径
        changeOrigin: true, //是否改变请求源头
        rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
      }
    }
  }

1.3 LessCss

只需要安装 less 即可使用 , 用 vite 和 vue-cli 一样比较骚的，要文件名 *.module.less 才行

pnpm i less

1.4 SassCss

只需要安装 sass 即可使用  这两个都是css样式 在个人习惯 

pnpm i sass

2. 集成 react-router

 先下载包 

pnpm  i react-router-dom

react router dom v6 支持配置路由 useRoutes（hook）实现

// 官方示例
import { useRoutes } from "react-router-dom";

function Router() {
  let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);

  return element;
}

react router dom v6 已经抛弃了 Switch（组件），改用 Routes（组件），写组件路由需要注意

2.2 Redirect 替代方案 Navigate

react router dom v6 中已经抛弃了 Redirect。但是可以使用 Navigate（组件） 或 useNavigate（hook）作为替代方案，简单的实现一个 Redirect。

import { useEffect } from 'react';
import { useNavigate, Navigate } from 'react-router-dom';

export function Redirect({ to, replace, state }: { to: string, replace: boolean, state: object }): null {
    const navigate = useNavigate();

    useEffect(() => {
        navigate(to, { replace, state });
    });

    return null;
}