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

Question

我试图在 React Router 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;

Answer 1

正如已接受的答案所暗示的那样，重复代码可能不是一个好主意，当对加载组件的调用发生变化时，很容易中断。

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

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

Answer 2

显然在 v6 中，数组不再起作用，你必须使用旧的方法，但使用elementprop.

尝试这个：

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

工作代码沙箱。