react-router-dom 模版代码复制粘贴使用

首先安装 npm i react-router-dom 或者 pnpm i react-router-dom

然后在src目录下创建router文件，在router文件下创建index.js文件在输入下面内容

// 路由代码模版 (自觉创建对应文件)
import { createBrowserRouter } from 'react-router-dom'
import  Home  from '@/pages/Home'
import  About  from '@/pages/About'
import  NotFound  from '@/pages/NotFound'
import  Layout  from '@/pages/Layout'

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '/',
        index: true,
        element: <Home />,
      },
      {
        path: '/about',
        element: <About />,
      },
      {
        path: '*',
        element: <NotFound />,
      },
    ],
  },
  {
    path: '/about',
    element: <About />,
  },
])
export default router

在main.js修改

import ReactDOM from 'react-dom/client'
// 引入路由
import { RouterProvider } from 'react-router-dom'
import router from './router/index.tsx'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <RouterProvider router={router} />
)