React Router DOM 升级到 v6 后的一些报错信息
之前在 React Router 的基本应用 讲了一下 react-router-dom 的一些基础用法。虽然那篇笔记写于去年，但是 react-router-dom 中有一些 breaking changes 导致原本的 API 已经被弃用。如果使用 npm i react-router-dom@5 的话，那么那篇笔记还是适用的，不过如果默认下载最新版本，那么程序就会抛出异常从而跑不起来。
报错 1：‘Switch’ is not exported from ‘react-router-dom’
那是因为 Switch 已经被弃用，被 Routes 所取代，这个问题就比较好解决：
import {
BrowserRouter,
Routes, // instead of "Switch"
} from "react-router-dom";
// ...
<BrowserRouter>
<Routes>{/* 里面继续用 Route */}</Routes>
</BrowserRouter>;
报错 2：Property ‘exact’ does not exist on type
exact 在 v6 中也被移除了，并且 Route 的使用方法有些不同，如：
<Route path="/" element={<Home />} />
原本的 component 被 element 所取代，传的值进去是一个。如果是这样的写法，那么这种写法就与使用 exact 相同。新版本的 react-router-dom 不会像之前的 Switch 一样遍历所有的 match 路径，而会返回第一个 match 的组件。
也就是说，可以去除 exact 直接使用路径：
<Routes>
<Route path="/" element={<App />} />
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
</Routes>
另外，官方文档中提供了一种 nested 的写法：
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
</Route>
</Routes>
</BrowserRouter>,
这种写法需要在外层添加一个 outlet：
import { Outlet, Link } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Bookkeeper</h1>
<nav
style={{
borderBottom: "solid 1px",
paddingBottom: "1rem",
}}
>
<Link to="/invoices">Invoices</Link> |{" "}
<Link to="/expenses">Expenses</Link>
</nav>
<Outlet />
</div>
);
}
这样的写法，子组件，即 Expenses 和 Invoices 会替换掉 Outlet 而保留外层结构不变，算是另一种概念的 HOC 了。
需要嵌入变量的写法也需要使用 nested component 的写法：
<Route path="invoices" element={<Invoices />}>
<Route path=":invoiceId" element={<Invoice />} />
</Route>
报错 2 中的代码来源于官方教程，也就是现在官方建议的使用方法。总体来说就是 nested nested 再 nested，或许这种写法能够更加直接间接地显示路径之间的关系吧。
参考
[1]: ‘Switch’ is not exported from ‘react-router-dom’
