在 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>
  );
};