Routing From One Page to another in Reactjs

The aim of this article is to teach you various ways to navigate pages. This article assumes you already know how to create a react app or you visit https://reactjs.org/docs/create-a-new-react-app.html .
You need to use either “yarn add react-router-dom” or “npm install react-router-dom” on your terminal depending on the package you are using to access the methods below. Don’t forget to wrap your App.js render with BrowserRouter or Router depending on how you call it.

Ways to route from one page to another:
• Link
• Navlink
• Redirect component
• History.push
• History.replace

1. Link
   It is used to manage page navigation while working as an anchor tag.
   
   import { Link } from ‘react-router-dom’;
   <Link to=”/login”>Login</Link>

2. NavLink

It works the same like Link. The only difference is that it has an “activeClassname” attribute that differentiate the current page from other pages by adding an “active” class to the anchor tag such that when the present url matches the page there is a change in color to represent the current active page. Note you need to style “active” with a colour of your choice.

import { NavLink } from ‘react-router-dom’;
‘<NavLink exact activeClassName=”active”to=”/login”>Login</NavLink>’

styling with css

.active {
colour: red;
}

3.Redirect Component

This involves using a Redirect component to redirect a page to another page by overriding the current location in the history stack. It is usually used with conditional statements especially when checking authorization. Example

import React, {useState} from ‘react’
import { Redirect } from ‘react-router-dom’;
export default function Dashboard(props) {
const [isLoggedIn,setIsloggedIn] = useState(true);
if(!isLoggedIn){return <Redirect to=”/login” />}
return (
<div>
<h2>Welcome to Dasboard</h2>
<p>{JSON.stringify(props.history.location.state)}</p>
<button onClick={()=> setIsloggedIn(false)}>Logout</button>
</div>
)}

4.History.push

This is mainly used when you want to navigate to another page from a present page on the click of button or an icon button. It basically allows you to push a new path into the history stack while navigating to the new path when the trigger is initiated.
There are 2 ways to use history.push:
1. You can use props to call it. Example:

import React from ‘react’
export default function Login(props) {
return (
<div>
<h1>This is the Login page</h1>
<input placeholder=”Enter your username” type=”text”/> <br/><br />
<input placeholder=”Enter your password” type=”password” /> <br />
<button onClick={()=> {props.history.push(‘/dashboard’)}}>Login</button>
</div>
)}
2. You can use useHistory from react-router-dom. Example:

import React from ‘react’
import { useHistory } from ‘react-router-dom’
export default function Login() {
const history = useHistory()
const handleClick = () =>{history.push(‘/dashboard’)}
return (
<div>
<h1>This is the Login page</h1>
<input placeholder=”Enter your username” type=”text”/> <br/> <br />
<input placeholder=”Enter your password” type=”password” /> <br />
<button onClick={()=> handleClick()}>Login</button>
</div>
)}

Instead of using just the string ‘/pathname’, you can use the location object which gives you access to many other properties like:
• Pathname: (type: string) the url or path
• Hash: (type: string) The url hash fragment
• Search: (type: string) query the url
• State: (type: object) It allows passing of an object along with location on the history stack. Accessible only in browser and memory history.

history.push(‘/pathname’, { id: 1, hash: ‘item 1’, data: {…} })

You can retrieve the state variable using any of this below:
{JSON.stringify(props.history.location.state)}
const {state} = history.location.state
console.log(‘data’: state.data) and so forth

5. History.replace

This is similar to history.push only that it will replace the current position in the history stack. Clicking back arrow to go back won’t take you to the immediate last path but second to last path . History.replace takes in two parameters, first is the path name as a string and second is the state as object.. history.replace(path,state)
Example:

import React from ‘react’
import { useHistory } from ‘react-router-dom’
export default function Login() {
const history = useHistory()
const handleClick = () =>{history.replace(‘/about’)}
return (
<div>
<h1>This is the Login page</h1>
<input placeholder=”Enter your username” type=”text”/> <br/>
<br />
<input placeholder=”Enter your password” type=”password” /> <br />
<button onClick={()=> handleClick()}>Login</button>
</div>
)}