React Router DOM 升级到 v6 后的一些报错信息

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’

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

[3] : react-router/docs/getting-started/tutorial.md