React Router

see the official documentation for latest updates.

react-router-dom

A library for routing in React applications, allowing you to define routes and navigation between different components based on the URL. It enables the creation of single-page applications (SPAs) where the UI updates without refreshing the entire page.

Configuring react-router-dom

To configure routing in a React application, you typically wrap your application in the BrowserRouter component and define routes using the Routes and Route components.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

Creating Routes

Routes are created using the Route component within a Routes container. Each Route specifies a path and the component that should be rendered when the path is matched.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/products" element={<Products />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Types of Routers

  • BrowserRouter: Uses the HTML5 history API to keep the UI in sync with the URL. It’s the most common router for modern web applications.
  • HashRouter: Uses the hash portion of the URL (e.g., example.com/#/home) to keep the UI in sync with the URL. This is useful for older browsers that do not support the HTML5 history API.
  • MemoryRouter: Keeps the history of your “URL” in memory (doesn’t read or write to the address bar). Useful in non-browser environments or for testing.

Outlet Component

A placeholder component in react-router-dom that renders the matched child route components. It’s used when you have nested routes, allowing the parent route to render its child routes within the parent’s layout.

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>;

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* Child components will be rendered here */}
    </div>
  );
}

A component in react-router-dom used to navigate between different routes. It replaces the standard HTML anchor (<a>) tag and prevents full-page reloads by using the React Router’s internal routing mechanism.

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Types of Routing: Client-Side & Server-Side Routing

  • Client-Side Routing:
    • In client-side routing, the routing logic is handled by the browser using JavaScript. The URL changes without a full-page reload, and the content is dynamically updated by rendering different components.
    • React Router in a React application.
    • Faster navigation, no full-page reloads, smoother user experience.
  • Server-Side Routing:
    • In server-side routing, each URL change triggers a request to the server, which responds with a new HTML page. The entire page reloads on every navigation.
    • Traditional web applications built with frameworks like Django, Rails, or even basic PHP uses server-side routing.
    • Better for SEO, simple implementation.

What is GraphQL

A query language for APIs and a runtime for executing those queries. Developed by Facebook, GraphQL allows clients to request exactly the data they need and nothing more. Instead of multiple endpoints, a single GraphQL endpoint is used, and the client specifies the structure of the response.

{
  user(id: "1") {
    name
    email
    posts {
      title
    }
  }
}

Reduces over-fetching and under-fetching of data, improves performance, and allows for more flexible and efficient data retrieval compared to REST APIs.