We can pass data between pages in ReactJS in both class as well as functional components using Links v5 react-route and useNavigate, useLocation (hooks) v6 of react-router.
Let’s see how we can achieve the above in the class component
In PostScreen (Component) we have a Create Post link, by clicking the link we will go to the "/post-details"
page with the data we passed in the state object.
import React from 'react'; import { Link } from 'react-router-dom'; export default class PostComponent extends React.Component { render() { return ( <> <Link to={{ pathname: '/post-details', state: { post_id: 1, post_name: 'Lorem Ipsum', post_description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry." } }} > Create Post </Link> </> ) } }
Now in the PostDetailsScreen (Component), we can access the passed state object as below:
import React from 'react'; export default class PostDetailsScreen extends React.Component { //Log props data consoleLog() { console.log(this.props.location.state); } render() { return ( <> <button onClick={() => { this.consoleLog() }}>Log Props Data</button> </> ) } }
Now we have to achieve the above in the functional component
We will need useNavigate, useLocation hooks to achieve routing in functional component
import React from 'react'; import { useNavigate } from 'react-router-dom'; export default function PostScreen() { const navigate = useNavigate(); const createPost = () => { navigate('/post-details', { state: { post_id: 1, post_name: 'Lorem Ipsum', post_description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry." } }); } return ( <> <div> <span onClick={() => { createPost() }}> Create Post </span> </div> </> ); }
Now we will be able to access the post data on the post details screen.
import React from 'react'; import { useLocation } from 'react-router-dom'; export default function PostDetailsScreen() { const { state } = useLocation(); return ( <> <div>{state.post_id}</div> <div>{state.post_name}</div> <div>{state.post_description}</div> </> ) }
Thank you for reading this article, I really appreciate it. If you have any questions feel free to leave a comment.
One response to “How To Pass Data Between Pages In ReactJS?”
Thanks