How to use React Router 6, React Link, and nested Links?

Routing from one page to another page on a web application is a very common feature, it helps users to navigate from one page to another page.

React Router 6 is used in React js application for routing purposes. Routing from one page to another is very fast in react js and React Router 6 makes it easier to implement.

First, we need to install react-router and react-router-dom for that we will run this command in a terminal inside the project location, also install history which helps to track the routing history.

npm install react-router@next react-router-dom@next
npm install history

Firstly we need to create a file named Pages.js, where we write functions for all the pages we need for navigation.

We are also importing Link from react-router-dom so that we can navigate through the pages by clicking links.

The basic requirement is, we have a home page with two links for about and contact pages, and when we click on about it will show two more links for information and address page.

Contact page is just displaying message “Contact Page”.

These Information and address pages are opening through the nested links which are related to the about function or about page.

Firstly let’s look into the Pages.js file

import {Link} from 'react-router-dom';
import {useLocation} from 'react-router-dom';
import { Outlet } from 'react-router';
 export function Home(){
    return (
        <div>
            <h1>Home</h1>
            <nav>
                <Link to="about">About</Link><br/>
                <Link to="contact">Contact</Link>
            </nav>
        </div>
    )
}
 export function About(){
     
     let currentLocaiton = useLocation();
    return (
        <div>
            About<br/>
           
            My Current URL Location is {currentLocaiton.pathname}<br/>
            <Link to="info">Information</Link><br/>
            <Link to="address">Address</Link>
            <Outlet/>

        </div>
    )
}
 export function Contact(){
    return (
        <div>Contact</div>
    )
}
export function Info(){
    return (
        <div>Info</div>
    )
}
export function Address(){
    return (
        <div>Address</div>
    )
}
const Pages =()=>{
    
}
export default Pages;

Here useLocation() is for showing the current URL path or location of page.

Outlet is for showing the nested pages data.

Inside App.js file we are using the nested routes and we are defining the information and address pages inside the about page, and that’s why Outlet helps to detect the nested data of pages. You will understand it better once you see the below file which is App.js

import './App.css';
import {Home,About,Contact,Info,Address} from './Pages';
import Error from './Error';
import {Routes,Route} from 'react-router-dom';

function App() {
  return (
   <>
    <Routes>
    <Route path="/" element={<Home/>}/>
    <Route path="/about" element={<About/>}>
      <Route path="/about/info" element={<Info/>}/>
      <Route path="/about/address" element={<Address/>}/>
    </Route>
    <Route path="/contact" element={<Contact/>}/>
    <Route path="*" element={<Error/>}/>
    </Routes>
   </>
  );
}

export default App;

So now you can easily understand this functionality of routing and linking of pages.

One more file is there which is Error.js, which we have created in case of URL is invalid if we try to access the URL with a random name.

Here is the Error.js file

const Error =()=>{
    return <h2>Page not found</h2>
}
export default Error;

Let’s see the output screens

This is the home page, now if we click on about page next screen will display

Finally, if we click on information or address, the Outlet will display data from the specific page or function.

This is very easy to understand, once you practice this you will be an expert in react routing.

If you have any questions feel free to comment ill reply 🙂

Related Posts

frontbackgeek-images

Unveiling React Query: Building a Task Manager App with useMutation and useQuery Hooks

In this article, we will build a Task Manager app to understand What is React Query? and How to use React Query useMutation, and React Query useQuery…

frontbackgeek-images

Building Forms with Formik in React: Complete Code Examples and Explanations

In this article, we are building a simple form to understand how to build a form with Formik in React application, Here we are building a simple…

frontbackgeek-images

Creating React antd table with sorting and pagination and using antd select and antd modal for filtering and displaying the data.

In this article we are creating an antd table with React antd library, antd library is an ant design library, which has a rich set of components…

frontbackgeek-images

React Virtualized Tables: Enhancing the Performance of React 18 Applications

In this article, we will explore the concept of React Virtualized Tables as a solution to enhance performance in rendering large tables. We will delve into what…

React Native Expo Error Solution : ERROR Invariant Violation: “main” has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it, and restart it in the current project.

Solution is Reinstall with this Restart and Rescan the app

frontbackgeek-images

Exploring useLayoutEffect VS useEffect in React 18: A Deep Dive with Code Examples and Practical Comparisons

In React.js, Hooks are very important for handling state and for other features related to functional components, useLayoutEffect vs useEffect is a hot topic, because both are…

Leave a Reply

Your email address will not be published. Required fields are marked *