每当我将路径数组指定为Route时,都会出现以下错误:

meta.relativePath.startsWith is not a function

代码片段:

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

我遵循的教程使用的是较旧版本的Reaction路由,因此他们也使用Switch,这就是为什么它在教程中运行良好的原因.

因为在V6中Switch不再可用,我也试图查看有关如何传递路径数组的文档,但没有找到任何可以解决该错误的方法

推荐答案

react-router V6不支持在Route中传递path的array.

如果您想保持相同的行为,您需要将其分为多个Route,如下所示

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

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

或者一个更简单的方法是用.map

{
  ["/search", "/images", "/news", "/videos"].map((p) => (
    <Route key={p} path={p} element={<Results />} />
  ));
}

Reactjs相关问答推荐

为什么Next.js 14无法解析页面路由路径?

后端关闭时如何在REACTION AXIOS拦截器中模拟数据?

Reaction Ploly:如何在多个子情节中共享zoom 状态

FireBase Reaction Native-在呈现视图之前等待响应

为什么在页面重新加载时Location.State变得未定义?

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

ReactJS 中的图像加载顺序

Spring Boot + React + MySQL应用的架构层面有哪些?

React 状态不更新

在 reactJS 中导航时页面重新加载

从服务器获取数据时未定义,错误非法调用

antd 找不到 comments

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

如何在 JSX 中使用 -webkit- 前缀?

如果查询不存在,如何返回所有产品?

组件焦点上的 MUI 更改栏 colored颜色

当页面重新加载react 路由导航到第一页 v6

Material UI 安装和 React v. 18.2 出现问题