React Route not working?

Question

React

There is a react todo project

It has a list of folders and tasks inside, folder names are clickable in the list and inside tasks as titles, the list is not routed (but the address is replaced), when it is forced to update, it correctly enters the folder and opens only its tasks, return to view all tasks from all folders works fine, link to rep. https://github.com/TazievII/todo

Implementation on react-router-dom + axios + (fake) json-server

Code:
App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Route, useHistory } from 'react-router-dom';

import { List, AddList, Tasks } from './components';

function App() {
const [lists, setLists] = useState(null);
const [colors, setColors] = useState(null);
const [activeItem, setActiveItem] = useState(null);
let history = useHistory();

useEffect(() => {
axios
.get(' localhost:3001/lists?_expand=color&_embed=tasks ')
.then(({ data }) => {
setLists(data);
});
axios.get(' localhost :3001/colors ').then(({ data }) => {
setColors(data);
});
}, []);

const onAddList = obj => {
const newList = [...lists, obj];
setList(newList);
};

const onAddTask = (listId, taskObj) => {
const newList = lists.map(item => {
if (item.id === listId) {
item.tasks = [...item.tasks, taskObj];
}
return item;
});
setList(newList);
};

const onEditTask = (listId, taskObj) => {
const newTaskText = window.prompt('Task text', taskObj.text);

if (!newTaskText) {
return;
}

const newList = lists.map(list => {
if (list.id === listId) {
list.tasks = list.tasks.map(task => {
if (task.id === taskObj.id) {
task.text = newTaskText;
}
return task;
});
}
return list;
});
setList(newList);
axios
.patch(' localhost:3001/tasks ' + taskObj.id, {
text: newTaskText
})
.catch(() => {
alert('Failed to update task');
});
};

const onRemoveTask = (listId, taskId) => {
if (window.confirm('Are you sure you want to delete the task?')) {
const newList = lists.map(item => {
if (item.id === listId) {
item.tasks = item.tasks.filter(task => task.id !== taskId);
}
return item;
});
setList(newList);
axios.delete(' localhost:3001/tasks ' + taskId).catch(() => {
alert('Failed to delete task');
});
}
};

const onCompleteTask = (listId, taskId, completed) => {
const newList = lists.map(list => {
if (list.id === listId) {
list.tasks = list.tasks.map(task => {
if (task.id === taskId) {
task.completed = completed;
}
return task;
});
}
return list;
});
setList(newList);
axios
.patch(' localhost:3001/tasks ' + taskId, {
completed
})
.catch(() => {
alert('Failed to update task');
});
};

const onEditListTitle = (id, title) => {
const newList = lists.map(item => {
if (item.id === id) {
item.name = title;
}
return item;
});
setList(newList);
};

useEffect(() => {
const listId = history.location.pathname.split('lists/')[1];
if (lists) {
const list = lists.find(list => list.id === Number( listId));
setActiveItem(list);
}
}, [lists, history.location.pathname]);

return (


onClickItem={list => {
history.push(`/`);
}}
items={[
{
active: history.location.pathname === '/',
icon: (
width="18"
height=" 18"
viewBox="0 0 18 18"
fill="none"
xmlns=" www.w3.org/2000/svg "
>
d = "M12.96 8.10001H7.74001C7.24321 8.10001 7.20001 8.50231 7.20001 9.00001C7.20001 9.49771 7.24321 9.90001 7.74001 9.90001H12.96C13.4568 9.90001 13.5 9.49771 13.5 9.00001C13.5 8.50231 13.4568 8.10001 12.96 8.10001V8.10001ZM14.76 12.6H7 .74001C7.24321 12.6 7.20001 13.0023 7.20001 13.5C7.20001 13.9977 7.24321 14.4 7.74001 14.4H14.76C15.2568 14.4 15.3 13.9977 15.3 13.5C15.3 13.0023 15.2568 12.6 14.76 12.6ZM7.74001 5.40001H14.76C15.2568 5.40001 15.3 4.99771 15.3 4.50001C15 .3 4.00231 15.2568 3.60001 14.76 3.60001H7.74001C7.24321 3.60001 7.20001 4.00231 7.20001 4.50001C7.20001 4.99771 7.24321 5.40001 7.74001 5.40001ZM4.86001 8.10001H3.24001C2.74321 8.10001 2.70001 8.50231 2.70001 9.00001C2.70001 9.49771 2.74321 9.90001 3.24001 9.90001H4.86001C5 .35681 9.90001 5.40001 9.49771 5.40001 9.00001C5.40001 8.50231 5.35681 8.10001 4.86001 8.10001ZM4.86001 12.6H3.24001C2.74321 12.6 2.70001 13.0023 2.70001 13.5C2.70001 13.9977 2.74321 14.4 3.24001 14.4H4.86001C5.35681 14.4 5.40001 13.9977 5.40001 13.5C5.40001 13.0023 5.35681 12.6 4.86001 12.6ZM4.86001 3.60001H3. 24001c2.74321 3.60001 2.70001 4.00231 2.70001 4.50001c2.70001 4.99771 2.74321 5.40001 3.24001 5.40001H4.86001C5.35681 5.40001 5.40001 4.99771 5.40001 3.40001 4.681 4,0001 3.60001 3.60001 3.60001 3.6000350001C5.40001 4.00231 5.35681 3.60001 4.86001 3.60001Z"50001C5.40001 4.00231 5.35681 3.60001 4.86001 3.60001Z"
fill="black"
/>

),
name: 'All tasks'
}
]}
/>
{lists ? (
items={lists}
onRemove={id => {
const newLists = lists.filter(item => item.id !== id);
setLists(newLists);
}}
onClickItem={list => {
history.push( `/lists/${list.id}`);
}}
activeItem={activeItem}
isRemovable
/>
) : (
'Loading...'




{lists &&
lists.map(list => (
key={list.id}
list={list}
onAddTask={onAddTask}
onEditTitle={onEditListTitle}
onRemoveTask={onRemoveTask}
onEditTask={onEditTask}
onCompleteTask={onCompleteTask}
withoutEmpty
/ >
))} {activeItem && lists && ( list={activeItem} onAddTask={onAddTask} onEditTitle={onEditListTitle} onRemoveTask={onRemoveTask}

doesn't work here )



onEditTask={onEditTask}
onCompleteTask={onCompleteTask}
/>
)}




);
}

export default App;

List component
import React from 'react';
import classNames from 'classnames';
import axios from 'axios';

import removeSvg from '../../assets/img/remove.svg';

import Badge from '../Badge';

import './List.scss';

const List = ({
items,
isRemovable,
onClick,
onRemove,
onClickItem,
activeItem
}) => {
const removeList = item => {
if (window.confirm('Are you sure you want to delete the list?')) {
axios.delete(' localhost:3001/lists ' + item.id).then(() => {
onRemove(item.id);
}) ;
}
};

return(

• 
  {items.map((item, index) => (
  key={index}
  className={classNames(item.className, {
  active: item.active
  ? item.active
  : activeItem && activeItem.id === item.id
  } )}
  onClick={onClickItem ? () => onClickItem(item) : null}
  >
  

{item.icon? item.icon : }

{item.name}
{item.tasks && ` (${item.tasks.length})`}

{isRemovable && (
className="list__remove-icon"
src={removeSvg}
alt="Remove icon"
onClick={() => removeList(item)}
/>
)}

))}

);
};

export default List;

The Tasks component

import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

import editSvg from '../../assets/img/edit.svg';

import './Tasks.scss';

import AddTaskForm from './AddTaskForm';
import Task from './Task';

const Tasks = ({
list,
onEditTitle,
onAddTask,
onRemoveTask,
onEditTask,
onCompleteTask,
withoutEmpty
}) => {
const editTitle = () => {
const newTitle = window.prompt('List title', list.name);
if (newTitle) {
onEditTitle(list.id, newTitle);
axios
.patch(' localhost:3001/lists ' + list.id, {
name: newTitle
})
.catch(() => {
alert('Failed to update list title');
});
}
};

return (



{list.name}





{!withoutEmpty && list.tasks && !list.tasks.length && (
No tasks
)}
{list.tasks &&
list.tasks.map(task => (
key={task.id}
list ={list}
onEdit={onEditTask}
onRemove={onRemoveTask}
onComplete={onCompleteTask}
{...task}
/>
))}



);
};

export default Tasks;