Module 1 - React Router

Client-side vs Server-side Routing

Routing is an essential process for handling communication between computers. It's how we navigate through websites and web applications.

• Server-side Routing: When we request information from a server, that server sends back the document that was requested. The server refreshes the web page, and only the specific information requested is provided. This approach can be slower but loads smaller portions of the web page.
• Client-side Routing: In Single-Page Applications (SPAs) like React apps, the user interface is built on the client instead of being obtained from the server. Using the History API, the browser can change the URL without actually navigating to a new page, allowing React (with React Router) to render specific components based on the URL.

React Router Fundamentals

React Router is a routing solution for React apps that leverages the web address (URL) to determine which component(s) should render on the screen.

Key components of React Router:

• BrowserRouter: Wraps your component tree and enables routing functionality
• Routes: Container for multiple Route components
• Route: Maps a URL path to a specific component
• Link: Creates navigation links that change the URL without page reload

Basic setup example:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}
                

Dynamic Routing with URL Parameters

URL parameters allow you to create dynamic routes that can capture values from the URL and use them within your components.

• Define parameters in your route paths using a colon syntax: path="users/:userId"
• Access these parameters in your component using the useParams hook
• Use URL parameters for creating dynamic pages (e.g., product details, user profiles)

Example of using URL parameters:

// Route definition
<Route path="users/:userId" element={<UserProfile />} />

// In the UserProfile component
import { useParams } from 'react-router-dom'

function UserProfile() {
  const { userId } = useParams()
  // Now use userId to fetch specific user data
  return <h2>Profile for user {userId}</h2>
}
                

Programmatic Navigation

Sometimes you need to navigate users to a new route based on some event (like form submission or button click) rather than a direct link click.

• Use the useNavigate hook to get a navigation function
• Call this function to redirect users to a new route
• You can pass additional options like replace: true to replace the current history entry

Example of programmatic navigation:

import { useNavigate } from 'react-router-dom'

function LoginForm() {
  const navigate = useNavigate()
  
  const handleSubmit = (e) => {
    e.preventDefault()
    // Login logic
    // ...
    
    // After successful login, redirect to dashboard
    navigate('/dashboard')
  }
  
  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button type="submit">Login</button>
    </form>
  )
}