React18的边学边记

搭建项目

路由

路由有两种模式：对象模式和组件模式。

对象模式的配置

typescript 复制代码

// main.tsx

import { StrictMode } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
import 'reset-css/reset.css'  //样式初始化

import "@/assets/styles/global.scss" // 全局样式

import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

typescript 复制代码

// router.tsx

import React from "react";
import { Navigate } from "react-router-dom";

import Comp1 from '@/components/Comp1/index'
import Comp2 from '@/components/Comp2/index'

const baseRouter: any = [
  { path: "/", element: <Navigate replace to="/comp1" /> },
  { path: "/comp1", element: <Comp1></Comp1> },
  { path: "/comp2", element: <Comp2></Comp2> },
]
export default baseRouter

typescript 复制代码

// app.tsx

import { useState } from 'react'
import { Button } from 'antd';
import { useRoutes,Link } from "react-router-dom";
import router from '@/router/index'

function App() {
const outlet = useRoutes(router)
  return (
    <div className='app'>
      <Link to='/comp1'><Button type="link">Link comp1</Button></Link>
      <Link to='/comp2'><Button type="link">Link comp2</Button></Link>
      { outlet }
    </div>
  )
}

export default App

组件模式的配置

typescript 复制代码

// main.tsx

import { StrictMode } from 'react';
import { BrowserRouter } from "react-router-dom";
import { createRoot } from 'react-dom/client';
import 'reset-css/reset.css'  //样式初始化

import "@/assets/styles/global.scss" // 全局样式

import { AppRoutes } from "@/router/index.tsx"

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  </StrictMode>,
)

typescript 复制代码

// router.tsx
import React from "react";
import { Routes, Route } from "react-router-dom";

import App from '@/App';
import Comp1 from '@/components/Comp1/index'
import Comp2 from '@/components/Comp2/index'

export function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="comp1" element={<Comp1 />} />
        <Route path="comp2" element={<Comp2 />} />
      </Route>
    </Routes>
  );
}

typescript 复制代码

// app.tsx

import { useState } from 'react'
import { Button } from 'antd';
import { useRoutes,Link } from "react-router-dom";
import router from '@/router/index'

function App() {
const outlet = useRoutes(router)
  return (
    <div className='app'>
      <Link to='/comp1'><Button type="link">Link comp1</Button></Link>
      <Link to='/comp2'><Button type="link">Link comp2</Button></Link>
      { outlet }
    </div>
  )
}

export default App

抽取React Router的loading组件

typescript 复制代码

import React, { lazy } from "react";  // 导入lazy函数
import { Navigate } from "react-router-dom";

const Comp1 = lazy(() => import('@/components/Comp1/index'))
const Comp2 = lazy(() => import('@/components/Comp2/index'))


// 封装loading的函数
const withLoading = (component: any) => {
  return( <React.Suspense fallback={<div>Loading...</div>}>{component}</React.Suspense>)
}

// 在路由中使用懒加载loading函数
const baseRouter: any = [
  { path: "/", element: <Navigate replace to="/comp1" /> },
  { path: "/comp1", element: withLoading(<Comp1></Comp1>) },
  { path: "/comp2", element: withLoading(<Comp2></Comp2>) },
]

export default baseRouter

编程式导航

实现的思路：首先需要在router中设置嵌套路由表，然后在主页面，通过useNavigate函数重定向路由，并且在内容区域设置outlet组件用于显示内容。

typescript 复制代码

// router.tsx
const baseRouter: any = [
  { path: "/", element: <Navigate to="/comp1" /> }, // 空路由时重定向到第一个内容模块
  { path: "/", 
    element: <Home/>,
    children: [
      { path: "/comp1", element: withLoading(<Comp1></Comp1>) },
      { path: "/comp2", element: withLoading(<Comp2></Comp2>) }
    ]
  }
]

typescript 复制代码

// home.tsx

import { useNavigate, Outlet } from 'react-router-dom'; // 导入useNavigate用于重定向路由，outlet设置路由出口

 const navigate = useNavigate(); // 定义跳转的方法
 const menuClick = (e: any) => {
   navigate(e.key); // 重定向路由
 }

组件传值

入门级（修改变量）

实现的思路：首先通过useState创建一个变量以及修改变量的set函数，赋值修改时直接调用set函数。

typescript 复制代码

const [openMenuKeys, setOpenMenuKeys] = useState<string[]>([]); // 创建变量和修改变量的函数

 // 重新赋值，只保留数组最后一项
 setOpenMenuKeys([openKeys.length > 0 ? openKeys[openKeys.length - 1] : '']);