React Navigation: A Guide For Begginers

React Navigation: A Guide For Begginers

11 May 2024
Beginner
580 Views
11 min read

React Navigation: An Overview

React Navigation is a fundamental aspect of building mobile applications with React JS. It provides a powerful and flexible navigation solution that allows developers to create seamless user experiences in their applications. In this React Tutorial, we will explore more on What is React Navigation? and How to use Navigate in React?

Whether you're a beginner or an experienced React Native developer, understanding React Navigation is crucial for building robust and intuitive mobile apps. To delve deeper into this powerful feature and other advanced React concepts, consider enrolling in a specialized React JS course.

What is React Navigation?

React Navigation is a JavaScript library that enables navigation in React applications. It helps developers manage the navigation flow in a React app by providing a set of components and a navigation state manager.

Developed by the React Native community, React Navigation has become the de facto standard for navigation in React projects. React Navigation, in particular, is a widely used library that simplifies the navigation process in React applications, providing a structured and efficient way to move between components.

How to use Navigate in React

Every well-known frontend development framework has a unique approach to routing. React navigation usually refers to using conditional rendering to display specific screen components based on the URL in an application created using a framework such as React.

A library called React Router was developed on top of React to handle routes in a web application and enable programmatic React navigation. By conditionally displaying components, the react navigation library enables the user interface to be in sync with the browser URL.

Read More - React Interview Questions And Answers For Experienced

Installing react-router-dom

To get started with React Navigation, you need to install the react-router-dom library. Open your terminal and run:

npm install react-router-dom

Configuring routes

Once installed, you can configure the routes in your application. This involves defining the mapping between the URLs and the React components that should be rendered.

  • Navigate to your project's./src/App.js file.
  • Within this js code, import the following react-router-dom components.
  • Enclose the App component's content inside the <BrowserRouter>.
// Import necessary components from 'react-router-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// Define your React components
const Home = () => Home Page;
const About = () => About Page;

// Configure routes
const App = () => (
);

Basic React Navigation

Let's study about React JS's fundamental routing in this section. React Router gives us two ways to do this.

  1. Using <Link> component
  2. Using useNavigate hook

1. Using <Link> component

The <Link> component in React Navigation allows you to create hyperlinks that navigate to specific routes. It prevents the full page reload and provides a smoother user experience.

// In your component
<Link to="/about">Go to About Page</Link>

2. Using useNavigate hook

For programmatic navigation, you can use the useNavigate hook provided by react-router-dom. This hook returns a function that you can call to navigate to a specific route.

// In your component
import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return Go to About Page;
};

Read More - React JS Roadmap 2024

How to navigate to another page in React

React Navigation simplifies page navigation by providing these intuitive methods. Whether you choose to use <Link> components or the useNavigate hook, the goal is to enhance user experience by allowing easy movement between different parts of your application.

The user can also be redirected to a different page. We must utilize the <Navigate> component for this.

import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/" element={<Navigate replace to="/home" />} />
  </Routes>
 );
}

URL Parameters

React Navigation supports URL parameters, enabling dynamic routing based on user input or application state.You can specify a placeholder for a URL's dynamic section using the URL parameters.

We must use the : style syntax in your route path to deal with the URL parameters.Think about a situation where you would like to show a person's details page according to his distinct user ID.

// Configure routes with parameters
<Route path="/user/:id" component={UserProfile} />

// Access URL parameter in a component
const UserProfile = ({ params }) => {
  const userId = params.id;
  // ... rest of the component logic
};

How to access URL parameter in a Component

We can use the useParams() hooks to read the URL parameters in a component. Let's see how to retrieve the URL argument from the earlier illustration.

import { Routes, Route, useParams } from "react-router-dom";

function App() {
return (
  <Routes>
 <Route
  path="user/:userId"
      element={<User/>}
      />
  </Routes>
);
}
function User() {
  let params = useParams();
return <h1>User: {params.userId}</h1>;
}

Nested Routing

React Navigation supports nested routing, allowing you to structure your application in a hierarchical manner. This is particularly useful for complex layouts where components are nested within each other.

// Configure nested routes  
<Route path="/dashboard" component={Dashboard}>
<Route path="/dashboard/profile" component={Profile} />
<Route path="/dashboard/settings" component={Settings} />
</Route>

Related article - Routing and navigation for your React Native apps

Summary
React Navigation plays a pivotal role in creating a seamless and intuitive user experience in React Native applications. Its declarative syntax, built-in navigators, and extensibility make it a preferred choice for developers building mobile apps.
By understanding its features and best practices, developers can harness the full potential of React Navigation to create engaging and user-friendly mobile applications.

FAQs

Q1. What is navigation in React?

Navigation in React refers to the process of moving between different components or views within a web application. It allows users to seamlessly interact with various parts of the application.

Q2. What is the best navigation for React?

React Navigation is a popular and widely used library for handling navigation in React applications. It offers a variety of features and is well-maintained by the community.

Q3. Who uses react-navigation?

React Navigation is utilized by a broad range of developers building React applications, including individual developers, startups, and large corporations. Its versatility and ease of use make it a popular choice in the React ecosystem.

Q4. Why do we use navigate in React?

Navigation is crucial in React applications to provide a smooth and coherent user experience. By using navigation techniques like those offered by React Navigation, developers can create applications with intuitive and user-friendly navigation flows.

Take our React skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article
Live Training Batches Schedule
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this