Scribd
Upload
94 views

How To Use React Router in Your Application

This document provides an introduction to React Router, a library for handling routing and navigation in React applications. It discusses the basic components needed for routing like BrowserRouter, Route, Switch, Link and NavLink. It explains how Route renders components based on the URL path and Switch renders only one Route at a time. Link and NavLink are used for navigation and NavLink has additional active styling capabilities. The Redirect component is also covered for redirecting users to different locations conditionally. Installation with npm and a basic routing example is demonstrated to help beginners get started with routing in React.

Uploaded by

joshua
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
94 views

How To Use React Router in Your Application

This document provides an introduction to React Router, a library for handling routing and navigation in React applications. It discusses the basic components needed for routing like BrowserRouter, Route, Switch, Link and NavLink. It explains how Route renders components based on the URL path and Switch renders only one Route at a time. Link and NavLink are used for navigation and NavLink has additional active styling capabilities. The Redirect component is also covered for redirecting users to different locations conditionally. Installation with npm and a basic routing example is demonstrated to help beginners get started with routing in React.

Uploaded by

joshua
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

How to use React Router in your Application (A

beginner guide) - part 1


React-router is a third-party library that’s widely popular for its design and simplicity.
React router allows us to navigate through a React application with several views (pages
/ URL).
In this article you are going to learn how to apply react-router in your application,
starting from the basic installation steps, various react-router components and how to get
your application fully going with react-router.
Before I continue, I will like to share a short experience with you.
In my early days of learning react, I was working on a side project to solidify my
knowledge on react only to stumble on a problem which is, “how can I route between
pages in my application?”
This problem got me searching the internet, watching several YouTube videos and
dissecting the React-router documentation for days before I could get an understanding
of what react-router is and the principle behind certain components needed for my
application.
This article is meant for beginners trying to understand what react router is and
how to apply it in your application. Notwithstanding intermediate or experts can also use
this as a refresher to their previous knowledge about react router.

Why React router?


Just as we navigate (Route) from one page to the other using the HTML anchor
tag (<a href=’/’>Link</a>), same also, react router lets you handle routing declaratively.
The declarative routing approach allows you to control the data flow in your application.

What is Routing?
The process of moving between different views of an application when a user
clicks an element (link, button, image etc.) or enter a URL within the application is
referred to as routing in React.
Routing is the process of keeping the browser URL in sync with what’s being rendered
on the page. i.e if a user should navigate to href=’/about’ then the about page component
should be rendered accordingly.

Let’s quickly look at how we can setup a React-router in our React application.

Installation
npm install react-router-dom
Three (3) basic components in React-Router
I. React routers: React router API’s such as <BrowserRouter> and <HashRouter>
- <BrowserRouter>: which is the most used because it uses regular URL paths. e.g.
http://www.oci.com.ng/about
- <HashRouter>: which stores the current location in the hash portion of the URL. e.g.
http://www.oci.com.ng/#/about.

Note: The hash is never sent to the server.

II. Route matchers: like <Route> and <Switch>


III. React-router navigation: like <Link>, <NavLink> and <Redirect> which will be
discuss extensively as we progress.

To use a router, just make sure it is rendered at the root of your element hierarchy.
Which means you have to wrap your top-level component (<App />) in a router.

Index.js: diagram explaining the above

What is Route in React?


Let assume we have 3 components namely About, Contact and Dashboard. The
<Route /> is a react router package component responsible for rendering the exact UI
(exact component) when the current location (URL) matches the route path.

<Route path=”/about” >


<About />
<Route />

When a user clicks or navigate to a location (URL) that correspond to path=”/about”, the
About component gets rendered on the UI.

Note: exact: bool is one of the properties of <Route>.


When true, it will match the location.pathname exactly. As we move further in this
article we will understand what we mean by location.pathname.
Let me explain what will happen without the exact props, assuming we have 2 Routes
such namely About and Home.

<Route path=”/home” exact= true>


<Home />
</Route>
<Route path=”/about” >
<About />
</Route>
Both will be rendered because of the “/” present in both <Routes>’s.
But when exact is added and set to true it will match the exact path with the
corresponding component

Switch
A switch component works just like our normal Switch statement. A <Switch> checks
through all routes wrapped inside and rendered the exact Route path that matches the
current URL then stop (i.e after matching a particular path and rendering the UI, it
doesn't check the rest Routes).
switch diagram illustrating the above explanation

<Link >
The link component works exactly like the anchor element (<a
href=”/about”>About</a>) in HTML. The advantage of using the Link component is
that it eliminates browser refresh as propose to anchor tag. It is used to navigate between
pages, automatically rendering a new view (UI) each time.
<Link to=”/about” >About </Link>

to refers to the location reference just like the href.


Note: when you go to your dev tool, you will discover that the <Link> is interpreted as
an anchor tag.

<NavLink>
The NavLink renders the same function as <Link> except for the extra features added.
The NavLink comes with properties such as
(i) activeClassName
(ii) activeStyle
(iii) isActive
(iv) strict

activeClassName
Refers to the class to give the element when it is active. The default class given is
active.
Let’s create a class called active in our stylesheet and import it to our App components.

.active{color:red}

Immediately your Link is active, the color changes to red.

activeStyle(object)
It refers to the style we want to apply to the element when it is active.
Const active= {{fontSize: ‘2rem’, color: ‘red’, textDecoration: ‘underline’}}

We can then apply the active object(active) which is a css style to our component.

<NavLink to=’/about’ activeStyle={{active}}> About </NavLink>

isActive (function)
Is a function used to add extra logic for determining if a link is active or not.

<Redirect>
Have you ever tried redirecting a user to a different location when a particular condition
is fulfilled or after a form is been submitted and validated? The Redirect component acts
just like the server-side redirect do.

<Route exact path=”login”>


{isLoggedIn ? <Redirect to=”/dashboard” /> : <Home /> }
</Route>

to: refers to the path (URL) to redirect to.

Conclusion
In this first part, we were able to establish the concept of react-router, its
importance’s, and how to setup react router in your application with the basic component
needed to get you started.
In out next series, we are going to look at how we can use all this to create a budgetary
application
With this knowledge, you are absolutely ready to start writing complex react
applications.

I hope you found this article useful? If you did kindly follow me and hit the LIKE button
to get updates on my upcoming article on protected routes and other topics lined up for
you.
Thanks for staying around and hope to see you on my next article.

About

Written by
Joshua Oyewole

Front-end Developer | Freelancer | Content creator.


Follow me on twitter @joshuaOyewole11 for more tips on web development.
Visit my youTube channel for more content dissected for even an absolute beginner

You might also like