JAVASCRIPT

react router multiple path

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

multiple path names for a same component in react router

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

react router 6 multiple routes layout

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet /> // <-- nested routes rendered here
      </div>
    </main>
  </>
);

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />} >
          <Route path="/" element={<Dashboard />} /> // <-- nested routes
        </Route>
      </Routes>
    </>
  );
};

react route multiple components

//use multiple components in one Route:
<Route path='/path' render={props =>
  <div>
    <FirstChild />
    <SecondChild />
  </div>
} />

react routes multiple compoenents

<Routes>
 	<Route
	path="/"
	element={[
         <Header key={1} />,
  		 <LandingSection key={2}  />,
    	 <CardList key={3} /> ]}>
    </Route>
</Routes>

multiple path names for a same component in react router

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

Multiple path names for a same component in React Router v6

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