Using React Router for Routing and Navigation

React

React is a popular JavaScript library for building user interfaces. It allows different companies like Scrrum Labs  to build reusable components that can be easily composed to create complex UI. In this tutorial, I'll walk you through the process of building your first React Router  app.

React Router is a popular library for routing and navigation in React applications. It allows you to declaratively define the routes in your app and map them to components. When the URL changes, React Router will update the components that are displayed on the page.

To use React Router, you will first need to install it by running npm install react-router-dom or yarn add react-router-dom. Then, you can import and use the BrowserRouter, Route, and Link components to define your routes.

Here is an example of how you might use React Router to create a basic app with two routes:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

BrowserRouter

The BrowserRouter component is used to wrap the entire app and is responsible for handling the browser's history and URL changes. It should be used as the top-level component in your app.When a user clicks on a link or manually changes the URL, the BrowserRouter component listens for these changes and updates the components displayed on the page accordingly. This allows for a single-page experience where the content on the page updates dynamically without a full page refresh.

Route component

The Route component is used to define the different routes in your app and map them to components that will be rendered when the route is active. The path prop is used to specify the URL pattern that the route should match, and the component prop is used to specify the component that should be rendered when the route is active. You can also use the exact prop to specify that the route should only match the exact path and no other.When the URL changes, React Router compares the current URL with the path prop of each Route component, and if there is a match, it renders the corresponding component.

Link Component

The Link component is used to create clickable links that navigate between routes. It works similar to the a tag in HTML but instead of refreshing the page, it updates the URL and renders the corresponding component. This allows users to navigate between pages without a full page refresh.

In addition to the basic routing functionality, React Router also provides other features like dynamic routing, nested routing, and protected routes.

Dynamic Routing

Dynamic routing allows you to pass parameters to your routes, making it possible to create routes that can handle any number of different variations. For example, if you have a route for a user's profile, you can pass the user's ID as a parameter, and the route will render the correct profile for that user. To do this, you can use the : syntax to define a dynamic segment in the path, and use the useParams hook to access the parameters in your component.

<Route path="/users/:id" component={UserProfile} />

You can access the id parameter in the UserProfile component by using useParams hook

const { id } = useParams();

Nested Routing

Nested routing is useful when you want to create a hierarchy of routes within your app. For example, you might have a parent route for a dashboard and a child route for the settings. To do this, you can nest your Route components inside of each other.

<Route path="/dashboard" component={Dashboard}>
  <Route path="/dashboard/settings" component={Settings} />
</Route>

Protected routes

Protected routes are used to restrict access to certain parts of your app to only authenticated users. To do this, you can use the render prop instead of component prop and render a component only if certain conditions are met. For example, you can check if the user is logged in and only render the component if they are.

<Route path="/dashboard" render={() => isLoggedIn ? <Dashboard /> : <Redirect to="/login" />} />

It's worth mentioning that, React Router also provide a Switch component that allows you to group a set of routes together and render only the first one that matches. It's useful to use with nested routing, it will stop checking for other routes as soon as it finds a match.

In conclusion, React Router is a powerful and flexible library for routing and navigation in React applications. It allows you to declaratively define your routes, handle dynamic and nested routes, and create protected routes. With React Router, you can easily create dynamic and interactive single-page applications that provide a seamless user experience.