从 React Router v5 升级到 v6，以下代码的语法是什么？答案

【问题标题】：Upgrading from React Router v5 to v6, what is the syntax for the following code?从 React Router v5 升级到 v6，以下代码的语法是什么？
【发布时间】：2022-01-03 10:59:47
【问题描述】：

我正在制作一个搜索引擎，并希望路由一个数组路径来呈现结果组件。 React Router v5 的代码是这样的：

<Switch>
    <Route exact path={["/search", "/images", "/news", "/videos"]}>
        <Results />
    </Route>
</Switch>

v6 兼容的语法是什么？我尝试了以下方法，但它不起作用：

<Routes>
    <Route path={["/search", "/images", "/news", "/videos"]} element={<Results />} />
</Routes>

我当然已经导入了 Routes 和 Route import { Routes, Route} from "react-router-dom";。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我认为它不再支持数组并且不再支持可以使用的正则表达式（请参阅https://reactrouter.com/docs/en/v6/upgrading/v5）。类型定义也说path: string。所以你需要

<Route path="/search" element={<Results />} />
<Route path="/images" element={<Results />} />
<Route path="/news" element={<Results />} />
<Route path="/videos" element={<Results />} />

【讨论】：

不知道 v6 中不支持数组。此代码变得多余但有效。

【解决方案2】：

您可以按照@bas 的回答进行操作，或者为了更简单的方法和更少的输入，只需执行此操作即可。

{["/r1", "/r2", "/r3"].map((path, i) => (
    <Route path={path} key={i} element={<div>Same route</div>} />
))}

这是一个例子：

https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/App.js:2717-2846

【讨论】：