react-router7.9.4使用

2026/8/2 13:54:15 拓冰建站浏览量

安装

新版路由简化了安装，只需要以下命令即可

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} />)

效果预览

600

建站实战干货