import { ReactNode } from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import { v4 } from 'uuid'; import Home from '../pages/Home'; import Login from '../pages/Login'; import NotFound from '../pages/NotFound'; import Register from '../pages/Register'; import Create from '../pages/snippets/Create'; import Edit from '../pages/snippets/Edit'; import Library from '../pages/snippets/Library'; import Show from '../pages/snippets/Show'; import ProtectedRoute from './ProtectedRoute'; type RouteType = { path: string; element: ReactNode; _protected: number; }; const routes: RouteType[] = [ { path: '/', element: , _protected: -1 }, { path: '/login', element: , _protected: 0 }, { path: '/register', element: , _protected: 0 }, { path: '/library', element: , _protected: 1 }, { path: '/snippets/create', element: , _protected: 1 }, { path: '/snippets/edit/:id', element: , _protected: 1 }, { path: '/snippets/:id', element: , _protected: 0 }, ]; const getIndex = () => { let x = v4(); console.log(x); return x; }; const Router = () => { return ( {routes.map((route: RouteType) => { if (route._protected == -1) { return ( ); } else { return ( } > ); } })} } /> ); }; export default Router;

Dynamic Routes in React