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;
It's component
not element
Try this:
<Route exact path={["/","/home"]} component={<Homepage />} />
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}
/>
);
})}
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>
);
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.