Sometimes, we want to add multiple path names for the same component in React Router.
In this article, we’ll look at how to add multiple path names for the same component in React Router.
How to add multiple path names for the same component in React Router v6?
To add multiple path names for the same component in React Router, we can set the element property to the component we want to render.
For instance, we write
import React from "react";
import { BrowserRouter as Router, useRoutes } from "react-router-dom";
const App = () =>
useRoutes([
{ path: "/home", element: <Home /> },
{ path: "/users", element: <Home /> },
{ path: "/widgets", element: <Home /> },
]);
const AppWrapper = () => (
<Router>
<App />
</Router>
);
to render the Home component we navigate to /home, /users, or /widgets by calling the useRoutes hook with an array of routes.
Conclusion
To add multiple path names for the same component in React Router, we can set the element property to the component we want to render.
