Домашнее задание № 11 - Routing

[redexp]

Видео: https://youtu.be/U8jm6fMQSiw

Основное задание:

Домашнее задание todo-list дополнить роутингом.

• по урле / показываем все todo
• по урле /active показать только Active todo
• по урле /completed показать только Completed todo
• по урле /todo/:id показать только один todo с соответствующим id
• по урле /todo/:id/edit открывается редактирование этого todo

Дополнительное задание:

Первое

Избавиться от всех "inline" колбеков типа onClick={() => editTodo(id)}

эти колбеки либо должны быть обёрнуты в useCallback

const edit = useCallback(() => editTodo(id), [id]);
//...
    onClick={edit}

либо вынесены в метод класса со стрелочной функцией

edit = () => editTodo(id);
//...
    onClick={this.edit}

Второе

Вы часто храните в нодах сервисные данные типа индекса/айдишки тудушки типа value={index} или id={index} - это неправильно. Вместо этого создавайте новый компонент, в который передавайте всю сервисную информацию и внутри компонента берите её из пропсов, а не из DOM ноды.

[redexp]

добавил пример todo-list