This project is a Single-Page Application (SPA) built using React and React Router. It demonstrates how to set up routing and navigation in a React application using React Router. The project uses React Router version 6.11.2.
JavaScript: The foundational programming language for creating responsive and interactive features.React: The powerful JavaScript library used to build the project:-
useState: The React hook used to manage state.
React Query: Efficiently manages data fetching and API requests.React Query Devtools: Inspects and debugs React Query data and caching behavior.React Router 6: Handles routing and navigation within the React application.-
Outlet: Used in parent route elements to render their child route elements.
-
Link: A component that lets the user navigate to another page by clicking or tapping on it.
-
NavLink: A special kind of that knows whether or not it is "active" or "pending".
-
Navigate: Changes the current location when it is rendered.
-
Form: A wrapper around a plain HTML form that emulates the browser for client side routing and data mutations.
-
useRouteError: This hook returns anything thrown during an action, loader, or rendering.
-
useLoaderData: This hook provides the value returned from your route loader.
-
useNavigation: This hook tells you everything you need to know about a page navigation to build pending navigation indicators and optimistic UI on data mutations.
-
action: Called whenever the app sends a non-get submission ("post", "put", "patch", "delete") to your route.
-
redirect: Redirects to a specific route.
Axios: Performs HTTP requests and handles API calls.Styled Components: Utilizes CSS-in-JS to style React components.React Toastify: Displays toast notifications in the React application.TheCocktailDB API: Utilizes the API to retrieve cocktail-related data.
