react routers
Tue Feb 28 2023 21:31:59 GMT+0000 (Coordinated Universal Time)
Saved by @adelphin
npm create vite@latest name-of-your-project -- --template react # follow prompts cd <your new project directory> npm install react-router-dom localforage match-sorter sort-by npm run dev //root router //main jsx import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, } from "react-router-dom"; import "./index.css"; import Root from "./routes/Root"; const router = createBrowserRouter([ { path: "/", element: <Root />, errorElement: <ErrorPage />, }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); // En src/routes/root.jsx export default function Root() { return ( <> <div id="sidebar"> <h1>React Router Contacts</h1> <div> <form id="search-form" role="search"> <input id="q" aria-label="Search contacts" placeholder="Search" type="search" name="q" /> <div id="search-spinner" aria-hidden hidden={true} /> <div className="sr-only" aria-live="polite" ></div> </form> <form method="post"> <button type="submit">New</button> </form> </div> <nav> <ul> <li> <a href={`/contacts/1`}>Your Name</a> </li> <li> <a href={`/contacts/2`}>Your Friend</a> </li> </ul> </nav> </div> <div id="detail"></div> </> ); } // create src/error-page.jsx import { useRouteError } from "react-router-dom"; export default function ErrorPage() { const error = useRouteError(); console.error(error); return ( <div id="error-page"> <h1>Oops!</h1> <p>Sorry, an unexpected error has occurred.</p> <p> <i>{error.statusText || error.message}</i> </p> </div> ); } // create src/routes/contact.jsx
Comments