Scribd
Upload
2 views

reactrouter

This document provides a beginner's guide to using React Router DOM for creating multi-page applications in React. It covers the installation, basic setup, creating page components, adding navigation links, handling 404 pages, and navigating with buttons. The guide emphasizes the importance of a smooth user experience in Single Page Applications (SPAs) by avoiding full page reloads.

Uploaded by

Dinesh Ch
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

reactrouter

This document provides a beginner's guide to using React Router DOM for creating multi-page applications in React. It covers the installation, basic setup, creating page components, adding navigation links, handling 404 pages, and navigating with buttons. The guide emphasizes the importance of a smooth user experience in Single Page Applications (SPAs) by avoiding full page reloads.

Uploaded by

Dinesh Ch
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

React js tips

React Router DOM


V6 Basics
Quick & Easy Guide for Beginners!

Slim toumi
Slim toumi
React js tips

Why Use React Router?


React Router DOM is a tool that helps you add multiple pages to
your React app, so users can click around without reloading the
page. It’s perfect for creating a smooth, fast experience in a Single
Page Application (SPA), where only parts of the page update as
users navigate.

With React Router DOM, you can :


Set Up Different Pages: Create routes so users can visit URLs
like /home or /about to see specific content.
Link Pages Together: Use links to let users navigate easily
without reloading the page.
Handle 404 Pages: Show a custom "Page Not Found"
message if someone tries to visit a page that doesn’t exist.

Install React Router DOM


In your project folder, open the terminal and install React Router with this
command:

Slim toumi
Slim toumi
React js tips

Basic Setup in App.js


In your main App.js file, you need to set up BrowserRouter, Routes, and
Route to define each page (or route) in your app.

Explanation
BrowserRouter: Wraps the entire app to enable routing.
Routes: Holds all individual <Route> elements.
Route: Defines a page. The path is the URL, and element is the
component to display.

Slim toumi
Slim toumi
React js tips

Creating Page Components


Let’s create two simple pages: Home and About.
In your src folder, make two new files: Home.js and About.js.

Home.js :

About.js :

Slim toumi
Slim toumi
React js tips

Adding Navigation Links


To move between pages without reloading, use <Link>. Add a simple
navigation menu using <Link> in a new component called Navbar.js.

Navbar.js :

Explanation
Link: Creates clickable navigation to different pages in the app.

to : Specifies the URL path to navigate to when clicked.


Difference from <a> Tag: Unlike <a>, which reloads the entire
page, Link updates the URL and content without a full reload,
ensuring a smoother user experience while preserving the
application state.

Slim toumi
Slim toumi
React js tips

Now, add this <Navbar /> component to App.js so it appears on every


page:

Navbar.js :

Explanation
Navbar Outside of Routes: By placing <Navbar /> outside of
<Routes>, the navigation bar is always displayed, no matter
which page or route the user is on. This makes the navbar
accessible on all pages.

Slim toumi
Slim toumi
React js tips

Handling Unknown Routes (404 Page)


To handle routes that don’t exist, you can display a message using
a simple NotFound component.

NotFound.js :

Import the NotFound component in App.js and include it in the JSX.


The * in the route path serves as a catch-all for undefined routes,
directing users to the NotFound component.

App.js :

Slim toumi
Slim toumi
React js tips

Navigating with a Button (Optional)


You can also navigate with a button click. Use the useNavigate hook to
do this.

About.js :

Explanation
The useNavigate hook from react-router-dom allows you to
programmatically navigate between routes in your application.
In this example, it creates a button that navigates the user back
to the home page ('/') when clicked, allowing for smooth
transitions without traditional link elements.

Slim toumi
Slim toumi
React js tips

Your Final Project Structure


Your src folder should now look like this:

This is a basic structure of your React application. You can further


develop it by creating additional folders and components as
needed to organize your code better.

Slim toumi
Slim toumi
React js tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

Slim toumi
Slim toumi

You might also like