React Unveiled #7 - Routing & Navigation

Routing plays a pivotal role in managing navigation between different views of your application. It enables users to seamlessly transition between content by clicking links or using the browser's back/forward buttons, mimicking the behavior of traditional multi-page websites.

This blog talks about React Router, a library that simplifies and streamlines the process of implementing routing within your React applications.

Introducing React Router

React Router is a declarative routing library specifically designed for React applications. It provides a flexible API for defining routes, handling transitions, and managing navigation state. By embracing React Router, you can enhance the user experience of your SPAs by enabling intuitive navigation and efficient content rendering.

Setting Up React Router

Installation: Install React Router using your preferred package manager (e.g., npm or yarn):

Terminal:
```
 npm install react-router-dom
```
Import Components: Import the essential components from react-router-dom within your application:
```
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
```

Creating Routes and Navigation:

Wrap Your App: Enclose your application's root component with the BrowserRouter component from react-router-dom:

 function App() {
   // your app components
 }

 ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>,
   document.getElementById('root')
 );

Define Routes: Utilize the Routes component to define your application's routes. Within Routes, specify each route using the Route component:

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

 function App() {
   return (
     <BrowserRouter>
       <ul>
         <li>
           <Link to="/">Home</Link>
         </li>
         <li>
           <Link to="/about">About</Link>
         </li>
         <li>
           <Link to="/products">Products</Link>
         </li>
       </ul>

       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
         <Route path="/products" element={<Products />} />
       </Routes>
     </BrowserRouter>
   );
 }

path: Defines the URL path that triggers the route.
element: Specifies the component to render for that route.

Link Components: Employ the Link component to create navigation links within your application. These links handle navigation programmatically, ensuring a smooth user experience without full page reloads.

Routes can also accept dynamic parameters using the colon (: symbol) syntax:

<Route path="/products/:id" element={<ProductDetails />} />

In this example, the :id parameter captures the product ID from the URL, which can be accessed within the ProductDetails component using the useParams hook from react-router-dom.

404 Handling:

To display a custom component for non-existent routes (e.g., 404 Not Found), use the * wildcard path:

<Route path="*" element={<NotFound />} />

Conclusion:

React Router empowers React developers to implement efficient and user-friendly navigation within their SPAs. By incorporating the concepts of BrowserRouter, Routes, Route, and Link components, you can create dynamic applications, taking users seamlessly through different sections of your content.

Stay tuned for more insights, tips, and hands-on examples as we continue our React journey together. Happy coding!

React Unveiled #7 - Routing & Navigation

Table of contents

Introducing React Router

Navigation with Parameters:

Conclusion: