having multiple paths to the same component in react-router-dom v6

Question

i'm trying to have multiple paths/routes in react router v6 to render the same component

using previous versions of react router dom i could just do this and it would work:

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

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

now using v6 i'm trying the same thing but it doesn't work

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

how should i go about this? what changed exactly for it not to work?

full code of App.js where i do the routing

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;

Does this answer your question? [Multiple path names for a same component in React Router](https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router) — Ben Smith, Jan 14 '22 at 00:52
FYI that thread does have answers for React Router v6, I guess it might not have when this question was asked. — Ben Smith, Jan 14 '22 at 15:58

score 13 · Answer 1 · answered Dec 12 '21 at 11:18

13

Probably not a good idea to be repeating the code as the accepted answer suggests, easy to break when the call to the components to load changes.

Just map over the array to create the routes:

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

answered Dec 12 '21 at 11:18

Rich - enzedonline

746
4
10

Don't forget to wrap this within the `` for v6. – Fiddle Freak Nov 27 '22 at 04:57

whygee · Accepted Answer · 2021-12-04T20:18:36.903

12

Apparently in v6, arrays no longer work and you have to do it the old way but using element prop.

Try this:

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

Working CodeSandbox.

edited Dec 04 '21 at 20:18

answered Dec 04 '21 at 19:38

whygee

1,783
6
12

it's the same issue, i'm getting an error "TypeError: meta.relativePath.startsWith is not a function", this used to appear when i use "element" as well – M.KH Dec 04 '21 at 19:41
`exact` is no longer accepted since the matching algorithm has changed. – JunKim Jan 30 '23 at 04:46

score 0 · Answer 3 · answered Nov 20 '22 at 06:54

Another option is to useRoutes just the nav and put them as sibling to some of the <Routes />

Gist from how I'm using it:

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

having multiple paths to the same component in react-router-dom v6

3 Answers3

Linked