JAVASCRIPT

useRoutes

// React Router v6:
// hook functionally equivalent to <Routes>, but uses JS objects instead
// of <Route>, use this hook instead of 'react-router-config' (React Router v5)
import { useRoutes } from 'react-router-dom';

function App() {
  let element = useRoutes([
    {
      path: '/',
      element: <Dash />,
      children: [
        { path: 'messages', element: <DashMessages /> },
        { path: 'tasks', element: <DashTasks /> }
      ]
    },
    { path: 'team', element: <About /> }
  ]);

  return element;
}

useroutes how to use

//routes.js

import { useRoutes } from "react-router-dom";
import Home from './pages/Home'
import About from './pages/About'
import Login from './pages/Login'
import SignUp from './pages/Signup'
import AuthLayout from './layouts/AuthLayout'
import MainLayout from './layouts/MainLayout'

export default function Router() {
  let element = useRoutes([
      {
          element: <AuthLayout />,
          children: [
             { path: "/", element: <Login /> },
             { path: "signup", element: <SignUp /> },
          ],
      },
      {
          element: <MainLayout />,
          children: [
              { path: "home", element: <Home /> },
              { path: "about", element: <About /> },
          ],
      },
  ]);
  return element;
}

//App.js

import "./styles.css";
import { BrowserRouter } from "react-router-dom";
import Router from './routes'

export default function App() {
  return (
      <BrowserRouter>
          <div className="App">
              <h1>useRoutes Example</h1>
              <Router/>
          </div>
      </BrowserRouter>
  );
}

//link to full example
//https://codesandbox.io/s/thirsty-architecture-jgok5?file=/src/App.js