Why is state not passed to another component using Link?

Question

JavaScript

Hello! I have data coming from the server in the form of an array of objects, written to the state and displayed as a table. The last element in the table row is a button wrapped in a Link. In its props to I pass state. When I click on the button, I can't get the state in another component. How can this be fixed? Or please tell me alternative ways to pass data to the component on click?

Here are the routes:

import './App.css'
import TableData from './Moduls/TableData.jsx'
import AddTask from './Moduls/AddTask.jsx'
import {Routes, Route} from "react-router-dom"

function App() {
  return (
      <Routes>
        <Route path="/" element={<TableData/>}/>
        <Route path="/project/:projectId/:projectNameOrder" element={<AddTask/>}/>
      </Routes>

  );
}

export default App;

Here I receive data from the server, display it as a table and pass state:

import React, {useEffect, useState} from 'react'
import TableContainer from "@mui/material/TableContainer";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import Paper from "@mui/material/Paper";
import {TableBody} from "@mui/material";
import Button from "@mui/material/Button";
import {Link} from "react-router-dom";

const TableData = () => {

  const data = [
    {id_project: 37, name_order: 'Создать модель', start_date: '15.11.2020', start_date_work: '17.12.2020', 
end_date: '30.12.2020'},
    {id_project: 40, name_order: 'Создать сборку ', start_date: '17.10.2021', start_date_work: '07.11.2021', 
end_date: '30.12.2021'},
    {id_project: 38, name_order: 'Создать модель', start_date: '15.11.2020', start_date_work: '17.12.2020',
end_date: '30.12.2020'},
    {id_project: 39, name_order: 'Создать сборку из деталей', start_date: '17.10.2021', 
start_date_work: '07.11.2021', end_date: '30.12.2021'}
  ]


  const [dataProject, setDataProject] = useState(data)

  // useEffect(() => {
  // 	fetch('http://localhost:5001/api/projects/all')
  // 		.then(response => response.json())
  // 		.then(data => setDataProject(data))
  // }, [])

  console.log(dataProject)

  const style = {
    tableCell: {
      fontWeight: 'bold',
      fontSize: '16px'
    },
    button: {
      marginRight: '5px'
    },
    link: {
      textDecoration: 'none'
    }
  }

  return (
    <>
      <h1>
        Список проектов
      </h1>
      <TableContainer component={Paper} style={{marginTop: '10px'}}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell style={style.tableCell}>Название проекта</TableCell>
              <TableCell style={style.tableCell}>Дата формирования</TableCell>
              <TableCell style={style.tableCell}>Дата начала работы</TableCell>
              <TableCell style={style.tableCell}>Дата окончания работы</TableCell>
              <TableCell style={style.tableCell}>Действия</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {dataProject.map((project, index) => (
              <TableRow key={index}>
                <TableCell>{project.name_order}</TableCell>
                <TableCell>{project.start_date}</TableCell>
                <TableCell>{project.start_date_work}</TableCell>
                <TableCell>{project.end_date}</TableCell>
                <TableCell>
                  <Link
                    style={style.link}
                    to={{
                      pathname: `/project/${project['id_project']}/${project['name_order']}`,
                      state: project
                    }}
                  >
                    <Button
                      variant="contained"
                      id={project['id_project']}
                      style={style.button}
                      onClick={(e) => console.log(e.target.id)}
                    >
                      Редактировать
                    </Button>
                  </Link>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  )

}

export default TableData

Here is the component where I can't get the state:

import React from 'react'
import {useLocation} from "react-router-dom"

const AddTask = () => {
  const location = useLocation()
  console.log(location.state)

  return (
    <>
      <h1>Hello</h1>
    </>
  )

}

export default AddTask

Answer 1

State via Link is not recommended to pass. The State Link is only for passing the URL, and things that are only related to this page.
There are several ways to pass state to another component.
1. Pass through props.

const ChildComponent = (props) => {
  const {propsParameter} = props;
  return (
     <>
        <p>{propsParameter}</p>
     </>
)
}

const ParentComponent = () => {

  const [state,setState] = useState();
   
   return (
      <ChildComponent propsParameter={state}
)
}

2. Context
https://ru.reactjs.org/docs/context.html
If I understand correctly, you want to pass the current project from the map, but this is the wrong approach and this is of course a mistake.
What's inside the map should be a separate component.
And then pass the data from the map through props. Thus, if I copy the link to the page and go to a new tab, there will be no display problems, since the Link State is relevant only for the current session.