My React Journey: Day 27

React Router

Today’s focus is on mastering React Router, a key tool for building seamless navigation in React single-page applications (SPAs). Let me walk you through my learning journey and discoveries!

What I Learned from Building Navigation with React Router

1.Setup and Installation:

To start using React Router, I installed the library with:

npm install react-router-dom

Next, I imported the necessary modules:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.Creating Routes:

I created routes using createBrowserRouter, defining paths and linking them to specific components.

Example:

const router = createBrowserRouter([

  { path: '/', element: <HomePage /> },

  { path: '/profiles', element: <ProfilesPage /> },

  { path: '/profiles/:profileId', element: <ProfilePage /> },

]);

• Dynamic URLs: The route path:'/profiles/:profileId' demonstrates dynamic routing. It allows me to render a unique profile page based on the profileId.


• Error Handling: Adding errorElement ensures that users who navigate to invalid URLs see a 404 Not Found page.

3.Handling 404 Errors:

I created a custom error page (NotFoundPage.jsx) using React Router’s Link component:

<Link to="/">Home</Link>

This allows navigation back to the homepage without a full browser refresh, maintaining the SPA experience.

4.Mapping Components Dynamically:

In ProfilesPage.jsx, I used the map method to dynamically generate links for each profile:

{profiles.map((profile) => (

  <Link key={profile} to={`/profiles/${profile}`}>

    Profile {profile}

  </Link>

))}

This makes it scalable as new profiles can be added without rewriting the code.

5.Page Structure:

Each page/component serves a specific purpose:

• HomePage: Displays the default content when users visit /.


• ProfilesPage: Lists links to individual profiles.


• ProfilePage: Displays a placeholder for dynamic content related to a specific profile.


• NotFoundPage: Handles invalid URLs, enhancing user experience.

6.Avoiding Full Page Refreshes:

I learned that using the <Link> component instead of the <a> tag prevents unnecessary full-page reloads. This keeps the application fast and responsive.

7.Rendering Nested Views:

With React Router, I can easily render nested components or layouts by structuring my routes efficiently.

Final Thoughts

React Router is an essential tool for building rich and user-friendly SPAs. Its ability to dynamically route, handle errors gracefully, and ensure a seamless navigation experience is powerful.