如何在React18中正确引入react-router-dom6呢？本文告诉你

import React from 'react'
import { useRoutes, Navigate } from 'react-router-dom'

// import Home from '@/pages/home'
// import About from '@/pages/about'
// import UseState from '@/pages/useState'
// import UseEffect from '@/pages/useEffect'

/** 配置路由懒加载 */
const Home = React.lazy(() => import('@/pages/home'))
const About = React.lazy(() => import('@/pages/about'))
const UseState = React.lazy(() => import('@/pages/useState'))
const UseEffect = React.lazy(() => import('@/pages/useEffect'))
const UseRef = React.lazy(() => import('@/pages/useRef'))
const UseLayoutEffect = React.lazy(() => import('@/pages/useLayoutEffect'))
const UseMemo = React.lazy(() => import('@/pages/useMemo'))
const UseCallback = React.lazy(() => import('@/pages/useCallback'))
const Memo = React.lazy(() => import('@/pages/memo'))
const UseReducer = React.lazy(() => import('@/pages/useReducer'))
const UseContext = React.lazy(() => import('@/pages/useContext'))
const WebRTC = React.lazy(() => import('@/pages/webRTC'))

const Router: React.FC = () => {
  const element = useRoutes([
    {
      path: '/',
      element: <Home />
    },
    {
      path: '/about',
      element: <About />
    },
    {
      path: '/use-state',
      element: <UseState />
    },
    {
      path: '/use-effect',
      element: <UseEffect />
    },
    {
      path: '/use-ref',
      element: <UseRef />
    },
    {
      path: '/use-layout-effect',
      element: <UseLayoutEffect />
    },
    {
      path: '/use-memo',
      element: <UseMemo />
    },
    {
      path: '/use-callback',
      element: <UseCallback />
    },
    {
      path: '/memo',
      element: <Memo />
    },
    {
      path: '/use-reducer',
      element: <UseReducer />
    },
    {
      path: '/use-context',
      element: <UseContext />
    },
    {
      path: '/web-rtc',
      element: <WebRTC />
    },

    {
      path: '*',
      element: <Navigate to='/' />
    }
  ])

  return <React.Suspense>{element}</React.Suspense>
}

export default Router