React18路由表使用
November 12, 2022 •
Comment
安装依赖
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