This article will demonstrate how to define and access states while using ‘history.goBack()’ in ReactJS. States while navigating help in storing paths and routes to be used in history.goBack(). Let’s create a project to show the use of states in navigation using ReactJS.
Installation Steps
Step 1: Create a React application using the following command in VS Code IDE.
npx create-react-app <<folder_name>>
Step 2: After creating your project folder, move to it using the following command in the VS Code terminal.
cd <<folder_name>>
Step 3: As we are using the React-Router package, we need to install it using the below command.
Note: history.goBack() function is not available form react-router-dom 6.0.0. So we are installing version 5.1.2 for this example.
npm install react-router-dom@5.1.2
Project Structure
Below is the package.json file for dependency reference:
{
"name": "history",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Approach
- In the App.js file, we have coded the main application component. We have used BrowserRouter to enable routing, and we defined three routes using Route from the react-router-dom package that corresponds to the Home, About, and Contact components.
- We have defined the state object with the proper information in the Contact component.
- Then using history.push() function we navigated to the new route in our application, also we have sent state information. Firstly, we passed the route path as the 1st argument and then the state as the 2nd argument. history.push(‘/about’, { message: “Returning from Contact page” }).
- In the About component, we have used the ‘useLocation()’ hook that access the state information using the location.state and display the state data to the user.
Example: This example shows how to define state when using history.goBack() in ReactJS.
Javascript
//App.js import React from "react"; import { BrowserRouter as Router, Route, Link, } from "react-router-dom"; import Home from "./components/Home"; import About from "./components/About"; import Contact from "./components/Contact"; const App = () => { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact"> Contact </Link> </li> </ul> </nav> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </div> </Router> ); }; export default App; |
Javascript
//components/Home.js import React from 'react'; const Home = () => { return ( <div> <h1>Home Page</h1> <p>Welcome to neveropen website!</p> </div> ); }; export default Home; |
Javascript
//components/About.js import React from "react"; import { useLocation } from "react-router-dom"; const About = () => { const location = useLocation(); const state = location.state; return ( <div> <h1>About Us</h1> <p> neveropen is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants. </p> {state && state.message && ( <div style={ { backgroundColor: "yellow", padding: "10px" }}> <p> Returned from: <strong>{state.message}</strong> </p> </div> )} </div> ); }; export default About; |
Javascript
//components/Contact.js import React from "react"; import { useHistory } from "react-router-dom"; const Contact = () => { const history = useHistory(); const handleGoBack = () => { const state = { message: "Returning from Contact page" }; history.push('/about', state); }; return ( <div> <h1>Contact Us</h1> <p> You can contact us at support@geeksforgeeks.org </p> <button onClick={handleGoBack}> Go Back </button> </div> ); }; export default Contact; |
Step to Run Application:
For tunning the application in the web browser, we need to execute the below command in the terminal:
npm start
Output: After executing the above command, our application will start running on the below URL. So copy and paste the URL in the browser to see the application output:
http://localhost:3000
