在 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 />} />

我應該如何解決這個問題 go？ 到底是什么改變了它不起作用？

我進行路由的 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

它是component而不是element

嘗試這個：

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

工作代碼沙箱

Answer 2

正如公認的答案所暗示的那樣重復代碼可能不是一個好主意，當對組件的調用發生變化時很容易中斷。

只需 map 在陣列上創建路由：

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

Answer 3

另一種選擇是僅使用導航並將它們作為某些<Routes />的同級

我如何使用它的要點：

import React from 'react';
import { Route, Routes, useRoutes } from 'react-router-dom';

import Nav from './components/common/nav';

export const App: React.FC = () => {
  const element = useRoutes([
    { path: '/', element: <Nav /> },
    { path: '/equipment', element: <Nav /> },
    { path: '/client-area/*', element: <Nav /> },
  ]);
  return (
    <main>
      {element}
      <Routes>
        <Route />
        <Route />
        <Route />
        {/* Your routes here */}
      </Routes>
    </main>
  );
};