Как при клике на название задачи перейти на страницу задачи в React?

Question

[Dmitriy Dyatlov]

Добрый день, помогите начинающему! Я вывел из json файла задачи на екран, отобразил нужные свойства object,
подскажите как сделать при клике на название задачи в таблице перейти на страницу задачи с возможностью редактировать ее название, и при возврате к таблице измененное имя задачи должно сохраняться! Буду благодарен за помощь! использую create-reac-app , react-router-dom

import React, {Component} from 'react';
import PostData from '../data/tasks';



export default class TaskList extends Component {

    render() {

        return (
            <div className="container">
                <table className="table table-striped table-hover">
                    <thead className="thead-dark">
                    <tr>
                        <th>Name</th>
                        <th>Tags</th>
                        <th>Actual effort</th>
                        <th>Estimated effort</th>
                        <th>Due date</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        PostData.map((item, index) => {
                            if (item.obj_status === "active"){
                                return (
                                    <tr key={index}>
                                        <th>{item.name}</th>
                                        <th>{item.tags}</th>
                                        <th>{item.actual_effort}</th>
                                        <th>{item.estimated_effort}</th>
                                        <th>{item.due_date}</th>
                                    </tr>
                                )
                            }}
                        )

                    }

                    </tbody>
                </table>
            </div>
        )
    }
}

Comments

[Антон Спирин]

Ваш вопрос больше похож на задание. Что именно вам непонятно?

[Dmitriy Dyatlov]

Антон Спирин, Добрый день, мне непонятно как сделать переход с одной страницы(которая отображаеться, таблица) при нажатии на одно из заданий перейти на страницу свойств этого задания! Спасибо за ответ

Answer 1

[Антон Спирин]

1. Вам надо в элементах списка рендерить ссылку роутера с параметром, по которому будет осуществляться поиск по json. Например:
<Link to={`/tasks/${item.id}`}>Open</Link>

2. Далее надо добавить Route для детализации:

<Route exact path="tasks/:id" component={TaskDetails} />

3. В компоненте TaskDetails получаем нужную задачу с помощью параметра перехваченного роутером:

import React from 'react';
import tasks from '../data/tasks';

const TaskDetails = ({ match }) => {
  const { id } = match.params;
  const task = tasks.find(item => item.id === id);

  return ( /* ... */ );
}

export default TaskDetails;