本文用于记录笔者在使用React18开发时踩得一些坑及一些常用的知识。

1.动态className与普通className 写在同一个标签内

<Timeline className={`${!type ? "isshow" : ""}${"Timeline"}`}>

2.react-router v6配置时类型错误

根据react v16 的文档去配置项目中的路由时发现

找了很久没到到答案（对于ts的问题还是有点蒙的），然后在github找了个 关于 ts+react+router v6的项目结构看了看，原来是

3.类型“RouteObject[]”的参数不能赋给类型

报错如下

interface RouteObject {
  caseSensitive?: boolean
  children?: RouteObject[]
  element?: React.ReactNode
  index?: boolean
  path?: string
  auth?: boolean
}
 const element = useRoutes(routes)

多写了一个 index 属性（删除就不报错了）

interface RouteObject {
  caseSensitive?: boolean
  children?: RouteObject[]
  element?: React.ReactNode
  path?: string
  auth?: boolean
}

4.React18懒加载组件导致的路由跳转错误

react18中提供了lazy函数，用于懒加载，即当用到的时候才会开始加载，但是路由跳转是立刻完成的，所以就不免出现需要渲染的组件和没有加载完毕，本来也没多大问题，也就是会白屏用户体验不好，这个问题在以前的版本是不会报错的，但是本开发环境中却直接报错了，查了很多资料，终于找到了比较好的解决方案，使用react18提供的新组件Suspense解决了，顺手还能实现个加载显示加载动画的功能。

报错图片

该问题出现的环境

react 18.0.0
react-router-dom 6.3.0

copy 解决的代码

// index.js
import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {Spinner} from 'react-bootstrap'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById('root'));

const App = lazy(() => import('./views/App'));
const Login = lazy(() => import('./views/Login'));
const Register = lazy(() => import('./views/Register'));
const NotFound = lazy(() => import('./views/NotFound'));

root.render(
  <BrowserRouter>
    <Routes>
        <Route path="/" element={<App />}>

        </Route>
        <Route path="/login" element={
          <Suspense fallback={<Spinner animation="border" variant="primary" />}>
            <Login />
          </Suspense>
        } />
        <Route path="/register" element={
          <Suspense fallback={<Spinner animation="border" variant="primary" />}>
            <Register />
          </Suspense>
        } />
        <Route path="*" element={
          <Suspense fallback={<Spinner animation="border" variant="primary" />}>
            <NotFound />
          </Suspense>
        } />
    </Routes>
  </BrowserRouter>
);

个人解决代码如下
引入

import React, { memo, Suspense } from "react"

包裹

<Suspense fallback={<div>Loading...</div>}>{element}</Suspense>

import React, { memo, Suspense } from "react"
import "./App.less"
import { useRoutes, Link } from "react-router-dom"
import router from "./router/router"

const App: React.FC = function () {
  const element = useRoutes(router)
  return (
    <>
      <Link to={"/home"}>home</Link>
      <hr></hr>
      <Link to={"/login"}>login</Link>
      //{element}
      <Suspense fallback={<div>Loading...</div>}>{element}</Suspense>
    </>
  )
}
export default memo(App)

解决问题文章链接：http://t.csdn.cn/PeUx3

5.类型“AxiosResponse<any, any>”上不存在属性“rows”。

ts(2339)

问题起源

问题解决

request.ts文件中写入类型

declare module "axios" {
    interface AxiosResponse<T = any> {
      rows: any[];
    }
    export function create(config?: AxiosRequestConfig): AxiosInstance;
}

6.react-redux/immutable中getIn(['props1','props2'])无法使用

解决

yarn redux-immutable

该插件返回一个combineReducers函数，把redux的combineReducers函数替换掉即可；
如下:

import { combineReducers } from 'redux-immutable';
import { reducer as user } from '../pages/user/store';

export default combineReducers({
  user: user
});

\###后续补充中~