1.安装路由
npm install react-router-dom
2.src下创建入口文件
3.创建路由
// router/index.tsx
import { RouteObject } from 'react-router-dom'
import { lazy } from 'react'
import Home from '@/pages/home'
// react懒加载
// const Home = lazy(() => import('@/pages/home'))
const Login = lazy(() => import('@/pages/login'))
const Detail = lazy(() => import('@/pages/detail'))
const List = lazy(() => import('@/pages/list'))
const router: Array<RouteObject> = [
{
path: '/*',
element: <Home />,
children: [
{
index: true,
element: <Home />,
},
{
path: 'list',
element: <List />
},
{
path: 'detail',
element: <Detail />
}
]
},
{
path: 'login',
element: <Login />
}
]
export default router
App.tsx注册路由
// App.tsx
// import { useState } from 'react'
import './App.css'
import router from './router'
import { useRoutes } from 'react-router-dom'
function App() {
return useRoutes(router)
}
export default App
…end