How to send data with URL in ReactJS

In React, data can be passed as props to any other component. It can be done along the route as well. We can load some specific data depending on the route. And the route can be set dynamically. And as the path in the URL address, any kind of data can be sent and the page will render based on the routing path that is being sent dynamically.

In this article, we will learn how to send data with a URL in ReactJS(set a dynamic route).

Setup the environment for dynamic routing

Install React Router in the project folder.
Note: To know more details about setting up the link and routing, Read This Article
Create functional components

First component,

import React from 'react';

const AllUsers = () => {
    return (
        <div>

        </div>
    );
};

export default AllUsers;

Second component,

import React from 'react';

const UserDetail = () => {
    return (
        <div>

        </div>
    );
};

export default UserDetail;

Dynamic Routing

Go to App.js component and set up the path to access these components (in which path these components will render)

// src/App.js

import React, { useEffect, useState } from "react";
import { Routes, Route } from 'react-router-dom'
import AllUsers from "./components/AllUsers";
import UserDetail from "./components/UserDetail";

function App() {

  return (

    <div className="App">
      <Routes>
        <Route path="/all-users" element={<AllUsers />} />
        <Route path="/all-users/user/:id" element={<UserDetail />} />
      </Routes>

    </div>
  );

}

export default App;

<Route path="/all-users/user/:id" element={<UserDetail />} />

Here, /all-users/user/ this part is a static path. But :id , this part is a dynamic one. Any kind of data can be replace this dynamic part.

Go to the AllUsers component and load some user data there (we will be using a fake API to load the data. To know more about loading data from API, Read This Article).

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

const AllUsers = () => {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then(data => setUsers(data))
    }, [])
    return (
        <div className='grid grid-cols-3 '>
            {
                users.map(user =>
                    <div className="w-96 p-8 m-8 border border-orange-500 -200 " key={user.id}>
                        <h4><span className="text-xxl font-bold ">Name</span>:{user.name}</h4>
                        <h4><span className="text-xxl font-bold">Email</span>:{user.email}</h4>
                        <h4><span className="text-xxl font-bold">User Name</span>: {user.username}</h4>
                        <Link to={`/all-users/user/${user.id}`}><button className="border-3 border-orange-500 bg-orange-600 text-white px-12 my-6 py-2">Check Details</button></Link>
                    </div>
                )
            }
        </div>
    );
};

export default AllUsers;

Note: We are using Tailwind CSS for styling the component. To know more about it, Read This Article.

<Link to={`/all-users/user/${user.id}`}><button className="border-3 border-orange-500 bg-orange-600 text-white px-12 my-6 py-2">Check Details</button></Link>

Here, if the user clicks to this button, it will redirect to another component. And the data on that component will render dynamically based on the button, in which user container the button is in.

<Route path="/all-users/user/:id" element={<UserDetail />} />

After clicking on that button, the data of that specific id’d user will render to this <UserDetail /> component.

Go to <UserDetail /> component and receive the dynamic parameter using, useParams() which will be imported from 'react-router-dom‘.

import { useParams } from 'react-router-dom';

import React from 'react';
import { useParams } from 'react-router-dom';

const UserDetail = () => {
    const {id} = useParams()
    return (
        <div>

        </div>
    );
};

export default UserDetail;

Now render the data for the specific user using API and pass this {id} to that URL.

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const UserDetail = () => {
    const { id } = useParams()
    const [user, setUser] = useState({})
    useEffect(() => {
        fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
            .then(res => res.json())
            .then(data => setUser(data))
    }, [id])
    return (
        <div>
            <h2 className="text-4xl text-center mt-16">User Name: <span className="font-bold">{user.name}</span></h2>
        </div>
    );
};

export default UserDetail;

This is the dynamic route, in where the user data is rendering.

This is how we can send some specific element as URL parameter and render some specific data based on that parameter.