Passing Data (states) through React Router

#javascript #react #webdev #programming

Introduction

I was working on a side project recently in React and i wanted to pass data(state) from a component (Page) that was not in my initial component to another component(page). This might sound confusing but let me explain, basically the component i wanted to pass this particular state to was not imported to my component because it was a stand alone page i.e. had a different route, this was giving me issues for about a day till i started going through the react router docs and found out that you can pass state with Link component and useNavigate hook from react-router-dom routing package for react.
This article shows you a elegant approach to passing data via the Link component and useNavigate hook and accessing the data passed with the useLocation hook which is just a simple technique. I will display code using React functional components. Without further ado, let's get into it.

Passing Data

Data known as state can be passes via the Link component in the same way we pass props but it has a certain key (name) that has to be given to it in order for the data to be retrieved via the useLocation hook and also with the useNavigate hook also to be retrieved via the useLocation hook.

I'll be explaining both methods and how they can be done.

Link

import { Link } from 'react-router-dom';
const item = () =>{
//data to be passed
const Data = {
  name: 'Femi',
  phoneNumber: 123
}
<Link to="/some-where" state={myData}>Link Text</Link>
}

the above shows the Item (Route) component that we passed the data from, we will be retrieving the data below in Profile (Route) component.

useNavigate

import { useNavigate } from 'react-router-dom';
const item = () =>{
  const nav = useNavigate();
//data to be passed
const Data = {
  name: 'Femi',
  phoneNumber: 123
}
<div onClick={() => {
 nav("/some-where", { state:data});
}}>Clickme
</div>
}

The below shows how data is retreived after it has been passed by the two methods above.

import { useLocation } from 'react-router-dom';
const Profile = () =>{
const location = useLocation();
//the data here will be an object since an object was
const data = location.state;
console.log(data);
<p>data.name</p>
<p>data.phoneNumber</p>
}

Illustrating the above in a simple project

I'm guessing most of us can set up a react project with the traditional npx-create-react-app appname method, if you dont kindly check on how to do this from the react docs.

I will be using just the Link component to shocase this little build
Three Major component here.

App.jsx
Home.jsx
Profile.jsx

//App.jsx

import React from "react";

// import things from react-router-dom
import { BrowserRouter, Routes, Route } from "react-router-dom";

// import pages
import HomePage from "./Home";
import ProfilePage from "./Profile";
function App() {
  return (
<BrowserRouter>
  <div style={{padding: 30}}>
    <Routes>
 <Route path="/" element={<HomePage/>} /><Route path="/about" element={<ProfilePage />} />
   </Routes>
 /div>
 </BrowserRouter>
  );
}

export default App;

//Home.jsx

import { Link } from "react-router-dom";

const HomePage = () => {
  // this is for the first Link
  const data1 = {
    from: "David",
    message: "Welcome to David.com",
    return (
    <>
      <h1>Home Page</h1>
      <p>
        <Link to="/about" state={data1}>
          Go to Profile Page
        </Link>
      </p>
    </>
  );
};

//Profile.jsx

import { useLocation, Link } from "react-router-dom";

const Profile = () => {
  const location = useLocation();
  const state = location.state;
  console.log(state);
  return (
    <>
<h1>Profile page</h1>  
   <div>
      <h3>Passed data:</h3>
       <p>From: {state.from}</p>
       <p>Message: {state.message}</p>
       <p>Timestamp: {state.timestamp}</p>
    </div>
      <Link to="/">Go Home</Link>
    </>
  );
};

Conclusion

You can now pass data with Link components or useNavigate hook from react-router-dom package provided you use the useLocation to get access to the passed data. If you feel i made a mistake, kindly hit me to tell me what i missed, thanks for reading.