0

I have a list of users and onClick I want to go to the Detailed page of a single user.

app.js

<div className="body-wrapper">
          <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/Admin" element={<Admin />} />
             <Route path="/Edit/:id" element={<Edit />} />

Then on Admin.js (where I have the data) It is a function that returns the table details for all users:

displayStudents = (students) => {
    return (
      <table className="studentsTable">
      (...)
      <td>
            <Link
              to={{
                pathname: `/Edit/${student._id}`,
                state: { student: student }
            >
              Edit
            </Link> (...)

Then on the single user view, I can see the correct URL path with the selected user (http://localhost:3000/Edit/62921881288e89c0fd1f1e33) But when I console log location, state is empty.

Edit.js

import React from "react";
import { useLocation } from "react-router-dom";
    
 const Edit = () => {
 const location = useLocation();
 console.log(location);
 return (
    <>
      <div className="loginWrapper">
        Single user details
      </div>
    </>
  );
};
export default Edit;

I have checked tons of suggestions but can't make this work. Any idea what is wrong? The purpose is to get a new page with the details of a single user so that from there I can Edit a user profile. Thank you

patbet
  • 93
  • 1
  • 9
  • 1
    Can you please put your code on codesandbox and share the link it would be easy to look after the issue. – Aman Sadhwani May 30 '22 at 11:35
  • You checked tons of suggestions. Did you try looking at the [official documentation](https://reactrouter.com/docs/en/v6/components/link) for the `Link` component? – Drew Reese Jun 01 '22 at 00:10

1 Answers1

1

Make sure you are using React >= 16.8 in order to use useLocation hook. Then, using react router V6 you will pass a state prop like this:

<Link
  to={`/Edit/${student._id}`}
  state={{student: student}}>
    Edit
</Link>
Nemanja
  • 3,295
  • 11
  • 15