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 的组件。

关于 nested component，react-router-dom 提供了新的写法：

<Routes>
  <Route path="/" element={<App />}>
    <Route path="expenses" element={<Expenses />} />
    <Route path="invoices" element={<Invoices />} />
  </Route>
</Routes>

同样，包含变量的写法也可以使用 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’

[2]: Property ‘exact’ does not exist on type