react-router-dom v6 版本的使用方式以及踩坑

react-router-dom

在目前 React 项目中使用 路由 react-router-dom，默认安装版本已经升级到 v6 版本，相较于 v5 版本 v6 做了哪些改变？使用时有哪些踩坑？

使用 react-router-dom

v5 版本

import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
// 组件
import Home from './Home'

<BrowserRouter>
	// Switch 在 v5 版本中是可以忽略不写的，然而在 v6 版本中已经更换组件为 <Routes> 这个组件是必须项
	<Switch>
		<Route path="/home" component={Home} />
		// 重定向使用方式 Redirect v5版本重定向组件
		<Redirect to="/home" />
	</Switch>
</BrowserRouter>

---

v6 版本

使用方式一：标签形式

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
// 组件
import Home from './Home'

<BrowserRouter>
	// <Routes> 这个组件是必须项，否则会报错
	<Routes>
		<Route path="/home" element={<Home />} />
		// 重定向使用方式 Navigate v6版本重定向组件
		<Route path="/" element={<Navigate to="/home" />} />
	</Routes>
</BrowserRouter>

使用方式二：API形式

import { lazy, Suspense } from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

// 通过懒加载的方式引入注册路由的组件
const Home = lazy(() => import('./Home'))
const Child = lazy(() => import('./Child'))

const router = createBrowserRouter([
	{
		path: "/home",
		element: (
			// 踩坑1：使用懒加载的方式引入组件，必须在组件外面 包上 <Suspence></Suspence> 组件，否则报错
			// fallback : 路由组件加载完成之前显示的 UI 结构
			<Suspense fallback={<div>loading...</div>}>
				<Home />
			</Suspense>
		),
		// children 中写子路由，也就是二级路由
		children: [
			{
				index: true, // 默认二级路由的方式 是将 path 替换成 index: true,
				element: <Child />
			},
			{
				path: "/two",
				element: <Component />
			},
			// ...
		]
	}
])

// 使用路由组件 App.jsx
<RouterProvider router={router} />

踩坑2：使用 vite + react 创建的项目默认使用 jsx 语法，因此在 单独写 router 文件的时候要特别注意文件后缀名 .jsx，否则也会出现未知错误