Navigate from one page to another page in ReactJS

Today we will teach you how to navigate from one page to another page in ReactJS. There are multiple ways to redirecting from one component to another component in ReactJS. In this article, you will find all possible ways to manage redirection.

Checkout more articles on ReactJS

Before you start looking into it, I will recommend you to check the Routing in ReactJS.

https://youtu.be/nxTL83mR1uE

Way to navigate from one page to another page

Link
NavLink
Redirect Component
history.push
history.replace

1. Link

Link is used to manage the navigation and it worked as an anchor tag. Check below code for the demonstration.

import { Link } from 'react-router-dom';
...
...
<Link to="/about">About</Link>

2. NavLink

NavLink behaves the same as Link but in addition, it comes with a new attribute called "activeClassName" which helps us to add the class to the anchor tag when page url will match.

import { NavLink } from 'react-router-dom';
...
...
<NavLink activeClassName="active" to="/about">About</NavLink>

In the above example, when url will match the `/about` then `active` class will be added to the link.

React router is a very huge library to implement routing in React. Did you know about the React Router version 6? Refer to the link below for more information.

What’s new in React Router version 6

3. Redirect Component

Rendering a `<Redirect to="/path/to/redirect" />` component is used to manage the redirection. When you manage the redirection through the `<Redirect>` component then it will override the current location in the history stack.

import { Redirect } from 'react-router-dom';
...
...
render() {
  if(!this.state.isAuth) {
	return <Redirect to="/login" />
  }

  return <div>
	...
	...
  </div>
}

4. history.push

If you want programmatically navigation from one page to another then you should use `history.push` method. In other words, we can say if you want to manage the redirection on button click then you can use it. This function will push a new entry in the history stack.

handleSubmit = (employee) => {
  saveEmployee(employee).then(() =>
    this.props.history.push('/employee-list');
  ))
}

Instead of the string `/employee-list`, you can also pass the `location` object. `location` object contains the following property.

pathname - (type: string) The path of the URL.
search - (type: string) The URL query string.
hash - (type: string) The URL hash fragment.
state - (type: object) It's location specific state that passed with location onto the history stack. This is available only in browser and memory history.

You can also write the code below.

handleSubmit = (employee) => {
  saveEmployee(employee).then(() =>
    this.props.history.push('/employee-list', { id: 1, data: {...} });
  ))
}

You can retrieve the state variable using the code below.

const { state } = this.props.history.location;
console.log('id', state.id);
console.log('data', state.data);

5. history.replace

`history.replace` function will replace the current location in the history stack and manage the redirection same as the `history.push`.

this.props.history.replace(path, state);

The first parameter is the path name as a string without object, and the second parameter is the state as a object.

I would also like to share the link of the Nested Routes in React JS.

That's it for today.
Thank you for reading. Happy Coding!