1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import { Button } from "ariakit/button"; import { Dialog, DialogDismiss, DialogHeading, useDialogState, } from "ariakit/dialog"; import { Link, MemoryRouter, Outlet, Route, Routes, useNavigate, } from "react-router-dom"; import "./style.css"; function Login() { const navigate = useNavigate(); const dialog = useDialogState({ open: true, setOpen: (open) => { if (!open) { navigate("/"); } }, }); return ( <Dialog state={dialog} portal={typeof window !== "undefined"} className="dialog" > <header className="header"> <DialogHeading className="heading">Log in</DialogHeading> <DialogDismiss as={Link} to="/" className="button dismiss" /> </header> <form className="form"> <label className="label"> Username <input className="input" type="text" /> </label> <label className="label"> Password <input className="input" type="password" /> </label> <Button onClick={dialog.toggle} className="button"> Log in </Button> </form> </Dialog> ); } function Home() { return ( <> <Link to="/login" className="button"> Log in </Link> <Outlet /> </> ); } export default function Example() { return ( <MemoryRouter> <Routes> <Route path="/" element={<Home />}> <Route path="/login" element={<Login />} /> </Route> </Routes> </MemoryRouter> ); }