React18路由表使用

安装依赖

npm i react-router-dom

配置路由表

import Home from '@/views/Home'
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
const About = lazy(() => import('@/views/About'))
const User = lazy(() => import('@/views/User'))
const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/about',
    element: routeWithLoading(<About />)
  },
  {
    path: '/user',
    element: routeWithLoading(<User />)
  }
]
export default routes
function routeWithLoading(component: JSX.Element) {
  return <React.Suspense fallback={<div>Loading...</div>}>{component}</React.Suspense>
}

修改 main.tsx

import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

修改 App.tsx

import { useState } from 'react'
import router from './router'
import { useRoutes, Link } from 'react-router-dom'
function App() {
  const outlet = useRoutes(router)
  return (
    <div className="App">
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/user">User</Link>
      {outlet}
    </div>
  )
}

export default App