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.
Way to navigate from one page to another page
1. Link
Link is used to manage the navigation and it worked as an anchor tag. Check below code for the demonstration.
1 2 3 4 | 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.
1 2 3 4 | 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 63. 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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.
1 2 3 4 5 | 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.
1 2 3 4 5 | handleSubmit = (employee) => { saveEmployee(employee).then(() => this.props.history.push('/employee-list', { id: 1, data: {...} }); )) } |
You can retrieve the state variable using the code below.
1 2 3 | 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.
1 | 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!
