React Tutorial- React Router DOM v6 Send Or Get Props State With Link Example

React Router is an exceptional package for creating a routing system in React. It allows the user to navigate between different pages via various views and components.

In this React guide, we will learn to pass props object (state) via the Link component in React JS app using React Route DOM v6 package.

We will get to know how to get or receive data from the link component from another component in React JS application.

 

React Router DOM v6 Send Or Get Props State With Link Example

Step 1- Set Up React Environment

Firstly, we have to install Node and NPM on our system after which we will execute the below command in order to create the new React application:

npx create-react-app react-blog

cd react-blog

 

Step 2- Add React Router v6 Library

In the second step, we have to type the given command and hit enter to install the router DOM library:

npm i react-router-dom

Then, we go ahead and install the Bootstrap library by running the given command from the console:

npm install bootstrap

To take complete advantage of Bootstrap UI components, we have to add the Bootstrap CSS path in the App.js file:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

 

Step 3- Wrap App Component Using BrowserRouter

In the index.js file, we will import the BrowserRouter API from the “react-router-dom” package and wrap the app component with BrowserRouter API:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

Step 4- Make New Components

Afterward, we will make the new file by the name of components/Profile.js:

import React from "react";
function Profile() {
  return <div>Profile page</div>;
}
export default Profile;

 

We also need another file within the components/ folder. So, we will create a Dashboard.js file:

import React from "react";
function Dashboard() {
  return <div>Dashboard page</div>;
}
export default Dashboard;

 

Step 5-Pass Props Object Using Link Component

We have to create the Link components first and then define the props objects with the properties corresponding to send and retrieve through the Link component.

Here, we have to update the given code in the components/Profile .js file:

import { Link } from "react-router-dom";
const Profile = (props) => {
  const profileData = {
    component: "Profile page",
    content: "Data located in profile component",
    timestamp: Date.now(),
  };
  const dashboardData = {
    component: "Dashboard page",
    content: "Data is sent from profile component",
    timestamp: Date.now(),
  };
  return (
    <>
      <div>
        <Link to="/" state={profileData}>
          Go to : Profile
        </Link>
      </div>
      <div>
        <Link to="/dashboard" state={dashboardData}>
          Go to : Dashboard
        </Link>
      </div>
    </>
  );
};
export default Profile;

 

Step 6- Retrieve props Or State From The Link

We need to use the useLocation API to extract the props or properties that we received via the Link component.

We can easily show it in the dashboard component. So, we will update the below code in the components/Dashboard.js file:

import { Link, useLocation } from "react-router-dom";
const Dashboard = (props) => {
  const location = useLocation();
  const propsData = location.state;
  console.log(propsData);
  return (
    <>
      <h2 className="mb-4">
        React Send / Get State using Link Component Example
      </h2>
      {propsData && (
        <div>
          <h4 className="mb-3">Data Sent:</h4>
          <p>Page: {propsData.component}</p>
          <p>Content: {propsData.content}</p>
          <p>Timestamp: {propsData.timestamp}</p>
        </div>
      )}
      <hr />
      <Link to="/">Go back to Profile</Link>
    </>
  );
};
export default Dashboard;

 

Step 7- Set Up React Routing

To define routes, we have to import the profile and dashboard components.

Also, we will import Route and Routes APIs from the “react-router-dom” package.

Next, we need to define the Route component within the Routes module with route path and element.

In order to enable routing in React with Router DOM, we ensure to add the given code int the App.js component file:

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Profile from "./components/Profile";
import Dashboard from "./components/Dashboard";
import { Route, Routes } from "react-router-dom";
function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Profile />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </div>
  );
}
export default App;

 

Step 8- View App On Browser

Here, we will use the below command in order to check this React application on the browser:

npm start

 

Conclusion

Now, we have reached the conclusion of our React tutorial in which we have learned how to configure routing in React and send data through the Link component in React.

In addition, we have seen how to receive the values from the passed Link component to another component using the useLocation hook.