React 高级使用

目录

创建项目

样式初始化

路径别名配置

路径别名提示 

scss模块化管理样式

路由表写法

嵌套路由

---

 

创建项目

更改package.json启动命令

"scripts": {
    "dev": "vite --host --port 3002",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

样式初始化

npm i --save rest-css

路径别名配置

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

"baseUrl": "./",
    "paths": {
      "@/*":[
        "src/*"
      ]
    }

scss模块化管理样式

import React from "react"

// scss模块化引入
import styles from "./Comp1.module.scss"
const Comp = () => {
  return (
    

      
p1
    
  )
}

export default Comp

路由表写法

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
// 初始化样式
import 'rest-css'
// 全局样式
import "@/assets/styles/global.scss";
import App from './App'
import {BrowserRouter} from 'react-router-dom'
import Router from './router'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    
      
    
  ,
)

App.tsx

import { useState } from "react"
import Comp1 from "@/components/Comp1"
import {useRoutes,Link} from 'react-router-dom'
import router from './router'

function App() {
  const [count, setCount] = useState(0)
 const outlet = useRoutes(router)

  return (
    

      home|
      About|
      User
      {/* 占位符组件 */}
      {outlet}
    
  )
}

export default App

router/index.tsx

import React,{lazy} from 'react'
// Navigate重定向组件
import {Navigate} from 'react-router-dom'
import Home from '../Views/Home'

const About = lazy(()=> import('../Views/About'))
const User = lazy(()=> import('../Views/User'))
// 抽取loading组件
const withLoadingComponent =(comp:JSX.Element)=>(
  Loading……

}> {comp} ) // 懒加载模式组件 const routes = [ { path:'/', element: }, { path:'/home', element: }, { path:'/about', element: withLoadingComponent() }, { path:'/user', element: withLoadingComponent() }, ] export default routes

嵌套路由

Home.tsx

import React, { useState } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import {Outlet,useNavigate} from 'react-router-dom'

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Option 1', '/page1', ),
  getItem('Option 2', '/page2', ),
  getItem('User', 'sub1', , [
    getItem('Tom', '3'),
    getItem('Bill', '4'),
    getItem('Alex', '5'),
  ]),
  getItem('Team', 'sub2', , [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  getItem('Files', '9', ),
];

const View: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
 const navigateTo = useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const menuClick = (e:{key:string})=>{
    console.log(e.key);
    // 点击跳转到对应路由，编程式导航跳转，hook
    navigateTo(e.key)
  }

  return (
    
      {/* 左边侧边栏 */}
       setCollapsed(value)}>
        

        
      
      {/* 右边内容 */}
      
        {/* 右边头部 */}
        

          {/* 面包屑 */}
          
            User
            Bill
          
        
        {/* 右边内容 */}
        
          {/* 窗口部分 */}
          
        
        {/* 右边底部 */}
        
Ant Design ©2023 Created by Ant UED
      
    
  );
};

export default View;

router/index.tsx

import React,{lazy} from 'react'
// Navigate重定向组件
import {Navigate} from 'react-router-dom'
import Home from '../Views/Home'

const About = lazy(()=> import('../Views/About'))
const User = lazy(()=> import('../Views/User'))
const Page1 = lazy(()=> import('../Views/Page1'))
const Page2 = lazy(()=> import('../Views/Page2'))
// 抽取loading组件
const withLoadingComponent =(comp:JSX.Element)=>(
  Loading……

}> {comp} ) // 懒加载模式组件 const routes = [ // 嵌套路由 { path:'/', element: }, { path:'/', element:, children:[ { path:'/page1', element: withLoadingComponent() }, { path:'/page2', element: withLoadingComponent() }, ] } ] export default routes