React Navigation: A Guide For Begginers

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? andHow 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

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