react-router7.9.4使用

安装

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

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

效果预览

prettier

导入排序规则包 @trivago/prettier-plugin-sort-imports，如果v6没有发布，就使用这个插件包prettier-plugin-sort-imports

prettier.config.cjs 推荐配置如下

const pluginPath = require.resolve('prettier-plugin-sort-imports');

module.exports = {
  tabWidth: 2, // 缩进2个空格
  useTabs: false, // 缩进单位是否使用tab替代空格
  semi: true, // 句尾添加分号
  singleQuote: true, // 使用单引号代替双引号
  printWidth: 100000, // 个人不喜欢换行
  plugins: [pluginPath],
  sortingMethod: 'lineLength',
  sortingOrder: 'ascending',
};

配置好后，如果编辑器的右键格式化不生效，可以重启下试试！