在 react-router-dom v6 中有多个路径到同一个组件答案

【问题标题】：having multiple paths to the same component in react-router-dom v6在 react-router-dom v6 中有多个路径到同一个组件
【发布时间】：2022-01-10 16:15:39
【问题描述】：

我正在尝试在反应路由器 v6 中使用多个路径/路由来呈现相同的组件

使用以前版本的 react router dom 我可以做到这一点，它会工作：

<Route exact path={["/", "/home"]}>
     <Home />
</Route>

<Route exact path={"/" | "/home"}>
     <Home />
</Route>

现在使用 v6 我正在尝试同样的事情，但它不起作用

<Route exact path={["/","/home"]} element={<Homepage />} />

我应该怎么做？究竟发生了什么变化使其不起作用？

我在其中进行路由的 App.js 的完整代码

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Contact from './components/Contact';
import Homepage from './components/Homepage';
import Projects from './components/Projects'

function App() {
  return (<Router>
    <Navbar />
      <Routes>
        <Route exact path={["/","/home"]} element={<Homepage />} />
        <Route exact path="/contact" element={<Contact/>} />
        <Route exact path="/projects" element={<Projects />} />
      </Routes>
    <Footer />
  </Router>);
}

export default App;

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

显然在 v6 中，数组不再起作用，您必须使用旧方法，但使用 element prop。

试试这个：

<Route exact path="/" element={<Homepage />} />
<Route exact path="/home" element={<Homepage />} />

Working CodeSandbox.

【讨论】：

这是同一个问题，我收到一个错误“TypeError: meta.relativePath.startsWith is not a function”，当我使用“element”时也会出现这种情况
请发布您的完整代码，我用 CodeSandbox 更新了答案，它可以完美运行。
用完整代码编辑的帖子
编辑后的解决方案有效，谢谢

【解决方案2】：

按照公认的答案建议重复代码可能不是一个好主意，当对加载组件的调用发生变化时很容易中断。

只需映射数组即可创建路线：

 {["/", "/home"].map((path, index) => {
        return (
          <Route path={path} element={
              <PageWrapper>
                <Home />
              </PageWrapper>
            }
            key={index}
          />
        );
      })}

【讨论】：