React - Routing (Advanced)

// Mini matcher: patterns like /users/:id and /users/:id/settings
function compile(pattern){
  const parts = pattern.split('/').filter(Boolean);
  const keys = [];
  const rx = new RegExp('^/' + parts.map(p => {
    if (p.startsWith(':')) { keys.push(p.slice(1)); return '([^/]+)'; }
    return p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }).join('/') + '$');
  return { rx, keys };
}
function matchRoute(path, routes){
  for (const r of routes){
    const { rx, keys } = r._compiled || (r._compiled = compile(r.path));
    const m = path.match(rx);
    if (m){ const params = {}; keys.forEach((k,i)=> params[k]=decodeURIComponent(m[i+1])); return { ...r, params }; }
  }
  return null;
}
function useHash(){
  const [hash, setHash] = React.useState(() => window.location.hash || '#/');
  React.useEffect(() => { const on=()=>setHash(window.location.hash||'#/'); window.addEventListener('hashchange',on); return ()=>window.removeEventListener('hashchange',on); }, []);
  return hash.replace('#','') || '/';
}
function Link({to, children}){ return {children}; }
function UsersLayout({children}){ return (
Users
{children}
); }

function UsersIndex(){ return 
Pick a user.
; }
function User({params}){ return 
User ID: {params.id}
; }
function UserSettings({params}){ return 
Settings for user {params.id}
; }
function NotFound(){ return 
Not found.
; }

function App(){
  const path = useHash();
  const routes = [
    { path: '/', element: 
Home
 },
    { path: '/users', element:  },
    { path: '/users/:id', elementFactory: (params) =>  },
    { path: '/users/:id/settings', elementFactory: (params) =>  },
  ];
  const m = matchRoute(path, routes);
  let view = ;
  if (m){ view = m.element || (m.elementFactory ? m.elementFactory(m.params) : null); }
  return (
    

      
      
{view}
    
  );
}
ReactDOM.createRoot(document.getElementById('try-adv-routing')).render();