“Benutzeroutes, wie man verwendet wird” Code-Antworten

Benutzeroutes, wie man verwendet wird

//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