安装
新版路由简化了安装，只需要以下命令即可
npm i react-router
创建路由文件
在项目根目录下创建路由文件 src\router\index.ts
import { lazy } from 'react'
import Root from '../components/root'
import { createHashRouter } from 'react-router'const router = createHashRouter([{path: '/',Component: Root,children: [{ index: true, Component: lazy(() => import('../pages/home')) },{ path: '/teacher', Component: lazy(() => import('../pages/teacher')) }]}
])export default router
定义根组件
定义Root文件，有时候也可以叫做 Layout，创建文件如下 src\components\root.tsx
import { Outlet } from 'react-router'export default function Root(): React.JSX.Element {return <Outlet />
}
定义普通页面组件
定义作为默认首页的页面 src\pages\home.tsx
const Home = () => {return <div>home</div>
}
export default Home
定义一个其他 普通页面src\pages\teacher.tsx
const Teacher = () => {return <div>teacher</div>
}
export default Teacher
项目中使用
入口文件如下 src/main.ts
import './assets/main.css'
import router from './router'
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router/dom'createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />)
效果预览
)
