How to redirect to another page in React

Key takeaways

  1. The react-router-dom library is essential for handling navigation and redirection between pages in a React application. It allows for dynamic routing within single-page applications (SPA).

  2. We need to create different components for each page we want to navigate, such as Main, ShoppingCart, and LogIn. These components will represent the different views in your application.

  3. The BrowserRouter component is used to wrap the entire application, enabling routing functionality. Inside, the Routes component is a container that holds all the Route components, each defining the path and the corresponding component to be rendered.

  4. When defining routes, it’s important to use the exact attribute for paths like / to ensure that the route only matches the exact URL and does not match partial paths.

  5. A fallback route (e.g., <Route path="*">) is used to redirect users to a default page if they try to access a route that doesn’t exist in the app.

  6. In the frontend, the Link component from react-router-dom is used to create navigation links that redirect users to different components.

Navigating between different pages is a common requirement when building dynamic web applications with React. Redirecting users to a new page—whether after a successful form submission, as part of an authentication flow, or for any other purpose—enhances the user experience by guiding them seamlessly through the application. Understanding how to manage these redirects effectively is crucial for developers looking to create intuitive and responsive interfaces.

Handle routing using the react-router-dom library

In React, we can use the react-router-dom library for handling redirection and navigation. This package allows us to handle dynamic routing in our React application. The following command can be used to install the react-router-dom library:

npm install react-router-dom

To handle routing in our React application, we need to follow these steps.

Step 1: Create components

First, create a basic React app and make different components to perform redirection from one component to another. Let’s create three components: Main, ShoppingCart, and LogIn.

import React from "react";
const ShoppingCart = () => {
return (
	<div>
	<h1>Shopping Cart</h1>
	</div>
);
};
export default ShoppingCart;
React components

Step 2: Implement routing

Now, let’s handle routing in App.js file. We set up routing for three components: Main, ShoppingCart, and LogIn, each with its respective paths. 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import LogIn from "./components/LogIn";
import ShoppingCart from "./components/ShoppingCart";
import Main from "./components/Main";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Define routes for Main, LogIn and ShoppingCart components*/}
        <Route exact path="/" element={<Main />} />
        <Route exact path="/login" element={<LogIn />} />
        <Route exact path="/shoppingcart" element={<ShoppingCart />} />
        {/* Redirect to Main component if any route mismatch */}
        <Route path="*" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

  • Line 1: To implement routing, you need to import the necessary components from the react-router-dom library.

  • Line 9: Wrap up your application inside the BrowserRouter component to enable routing functionality throughout the application.

  • Line 10: Inside the BrowserRouter component, we use the Routes component, which acts as a container for our individual routes.

  • Lines 12–14: <Route exact path="/" element={<Main />} /> defines route for Main component with the / path. The element prop is used to specify the component to render when the route is matched, which is Main in this case. We use exact attribute to make sure that the route will only be matched if the URL endpoint exactly matches with /. We can similarly define routes for LogIn and ShoppingCart components with login and /shoppingcart paths, respectively.

  • Line 16: <Route path="*" element={<Main />} /> defines that if the user visits any other route that does not match the defined path, they will be redirected to the Main component.

Step 3: Provide routing endpoints on the frontend

After implementing the routing, we have to provide routing endpoints on the frontend. Let's redefine a Main component and provide links to other routes. 

import React from "react";
import { Link } from "react-router-dom";
const Main = () => {
return (
	<div>
	<h1>Main</h1>
	{/* Define endpoints for the routing of Main, LogIn and ShoppingCart components 
	*/}
		<p><Link to="/">Main</Link></p>
		<p><Link to="/login">LogIn</Link></p>
		<p><Link to="/shoppingcart">ShoppingCart</Link></p>
	</div>
);
};
export default Main;

Now, if you run the React application given below, you can navigate to different pages using the links provided in the Main component. Clicking on these links will redirect you to the respective Main, ShoppingCart, and LogIn components. 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
React application with routing implemention

In the above SPA widget, we are using version 18.2.0 of React.

Whether redirecting after an action or dynamically adjusting the user journey, these tools empower you to build more responsive and user-friendly React applications. As you apply these concepts, you’ll find that managing navigation becomes a natural and powerful part of your development toolkit.

Conclusion

Redirecting and routing in React applications are made simple with the react-router-dom library. By following the outlined steps, you can create seamless navigation between different components, enhancing the user experience. Proper route handling, including fallback options and clear navigation endpoints, ensures that users are guided effortlessly throughout your application. Understanding these concepts allows developers to build efficient, responsive, and user-friendly React applications.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
YouTubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved