Mukul Padwal
Mukul Padwal's Blog

Follow

Mukul Padwal's Blog

Follow
Navigating Your React App with React Router (Part 4)

Navigating Your React App with React Router (Part 4)

Mukul Padwal's photo
Mukul Padwal
·Mar 9, 2023·

5 min read

Table of contents

  • What is React Router and how does it work?
  • Configuring routes in React Router
  • Summary

Welcome to the fourth part of our ReactJS series! In this blog, we're going to explore React Router, a popular library that provides client-side routing to your React application. Routing is an essential part of building a web application, and React Router makes it incredibly easy to manage your application's URLs and views.

What is React Router and how does it work?

React Router is a collection of navigation components that provide declarative routing to your React application. With React Router, you can define routes as components and render them in your application's view hierarchy. This makes it easy to create dynamic and interactive user interfaces that respond to user actions.

React Router works by listening to changes in the browser's URL and rendering the appropriate components based on the current URL. This means that when the user navigates to a new URL, React Router will handle the rendering of the appropriate component, allowing you to create a seamless user experience.

Now that we've covered the basics of React Router, let's dive into configuring routes in React Router.

Configuring routes in React Router

To configure routes in React Router, you first need to install the React Router package using npm or yarn. Once you've installed React Router, you can import it into your application and start defining your routes.

To define routes in React Router, you use the <Route> component. The <Route> component takes two props: path and component. The path prop specifies the URL path that the component should render for, and the component prop specifies the component to render for that path.

Here's an example:

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

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

In this example, we're defining three routes: one for the home page, one for the about page, and one for the contact page. Each route is defined using the <Route> component, and the path prop specifies the URL path for that route. The component prop specifies the component to render for that route.

Passing route parameters using URL parameters and Query strings

One of the great features of React Router is the ability to pass parameters to routes using URL parameters and query strings. This allows you to create dynamic routes that respond to user input.

To pass parameters using URL parameters, you use the colon syntax in your route path. Here's an example:

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

function App() {
  return (
    <div>
      <Route path="/users/:id" component={User} />
    </div>
  );
}

In this example, we're defining a route for user profiles. The path includes a parameter called "id", which can be accessed in the User component using the match object.

To pass parameters using query strings, you can use the location object that React Router provides. Here's an example:

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

function User() {
  const location = useLocation();

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {location.search}</p>
    </div>
  );
}

In this example, we're using the useLocation hook to access the query string parameters in the User component. The search property of the location object contains the query string parameters, which we can use to display the user's name.

Using nested routes and redirects

Finally, React Router also allows you to define nested routes and redirects. Nested routes are useful for creating complex UI hierarchies, while redirects are useful for redirecting users to a different URL when they try to access a specific page.

To define nested routes in React Router, you simply nest <Route> components inside other <Route> components. Here's an example:

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

function App() {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/about" component={About}>
        <Route path="/about/team" component={Team} />
        <Route path="/about/history" component={History} />
      </Route>
      <Route path="/contact" component={Contact} />
    </div>
  );
}

In this example, we're defining a nested route for the about page. The <About> component is the parent component, and the <Team> and <History> components are nested inside it. When the user navigates to /about/team or /about/history, React Router will render the appropriate component.

To define redirects in React Router, you use the <Redirect> component. Here's an example:

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

function App() {
  const isAuthenticated = true;

  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/login" component={Login} />
      {isAuthenticated ? (
        <Route path="/dashboard" component={Dashboard} />
      ) : (
        <Redirect to="/login" />
      )}
    </div>
  );
}

In this example, we're defining a redirect for the dashboard page. If the user is authenticated, React Router will render the <Dashboard> component. If the user is not authenticated, React Router will redirect them to the login page using the <Redirect> component.

And that's it! With React Router, you can easily add client-side routing to your React application, making it more dynamic and interactive for your users.

Summary

  • React Router is a collection of navigation components that provide declarative routing to your React application.

  • To configure routes in React Router, you use the <Route> component, which takes a path prop and a component prop.

  • You can pass parameters to routes using URL parameters and query strings.

  • Nested routes and redirects allow you to create more complex UI hierarchies and redirect users to different URLs.

Thanks for reading! Stay tuned for the next part of our ReactJS series.

Did you find this article valuable?

Support Mukul Padwal by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this