Почему не передается state в другой компонент с помощью Link?

Question

[andrey_chirkin]

Здравствуйте! У меня прилетают данные с сервера в виде массива объектов, записываются в state и отображаются в виде таблицы. Последний элемент в строке таблицы является кнопка, обернутая в Link. В его props to я передаю state. При нажатии на кнопку я не могу получить state в другой компоненте. Как можно это исправить? Или подскажите пожалуйста альтернативные способы передачи данных в компонент при клике?

Здесь прописаны роуты:

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;

Здесь получаю данные с сервера, отображаю в виде таблицы и передаю 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

Здесь компонент, в котором не могу получить 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

Comments

[Алексей Абрамов]

Так, как у вас сейчас, стейт передается в версии 5 , а судя по коду у вас версия 6.
Стейт передаётся как обычные пропсы

<Link
        to={`/project/${project['id_project']}/${project['name_order']}`}
        state={project}
>

[andrey_chirkin]

Алексей Абрамов, Спасибо! Заработало

Answer 1

[Lucoyan123]

State через Link не рекомендуется передать. State Link предназначен только для передачи URL, и таких вещей, которые связаны только с данной страницой.
Чтобы передать state на другой компонент есть несколько способов.
1. Передать через 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

Если я правильно понимаю, Вы хотите передать текущий проект из map, но это неправильный подход и это конечно же ошибка.
То, что внутри map, должен быть отдельным компонентом.
И потом уже данные из map передать через props. Таким образом, если я скопирую ссылку на страницу и перейду на новом вкладке, проблем не будет с отображением, так как Link State актуален только для текущей сессии.

Answer 2

[Groom7]

Нужно передавать таким образом:

<Link to="new-path" state={{ some: "value" }} />