Настройка роутинга в ReactJS

Доброго времени суток всем! Изучаю роутинг в ReactJS. Попытался настроить его в своём проекте, но он почему-то выдает пустую страницу (вместо содержимого, заключенного в первый ). Можете объяснить в чём проблема?

import React, {useState} from 'react';
import {BrowserRouter  as Router, Switch, Route} from "react-router-dom";
import Filters from '../filters';
import TaskList from '../tasksList';
import TaskEdit from '../taskEdit';
import DeleteExecutedTasksButton from '../deleteExecutedTasksButton';
import AddTaskForm from '../addTaskForm';


export default function App (){
const [data, setData] = useState([
    {'title': 'Задача 1', 'done': false, 'id': 0},
    {'title': 'Задача 2', 'done': true, 'id': 1},
    {'title': 'Задача 3', 'done': false, 'id': 2}
]);
const [filter, setFilter] = useState("all");

const addTask = (newTask) =>{
    if(newTask !== ""){
        const maxId = data.length > 0 ? data[data.length -1].id + 1 : 0;
        setData([...data, {'title': newTask, 'done': false, 'id': maxId}]);
    }
}
const deleteTask = (taskForDelete) =>{
    const index = data.findIndex((elem)=>elem.id === taskForDelete);
    this.setState({
        data: [...data.slice(0, index),...data.slice(index + 1)]
    });
}
const deleteExecuted = () =>{
    const dataWithoutExecuted = data.filter(item => !item.done);
    setData(dataWithoutExecuted);
}
const handleCheckboxChange = (taskForChange) =>{
    const index = data.findIndex((elem)=>elem.id === taskForChange);
    const elemWithChange = data[index];
    elemWithChange.done = !elemWithChange.done;
    setData([...data.slice(0, index), elemWithChange, ...data.slice(index + 1)]);
}
const getAll = () =>{
    setFilter("all");
}
const getExecuted = () =>{
    setFilter("executed");
}
const getNonExecuted = () =>{
    setFilter("non-executed");
}
let tasksForRender;
if(filter === "all"){
    tasksForRender = data;
}else if(filter === "executed"){
    tasksForRender = data.filter(elem => elem.done);
}else if(filter === "non-executed"){
    tasksForRender = data.filter(elem => !elem.done);;
}
return (
    <>
        <Router >
            <Switch>
                <Router path="/" exact component={
                        <section>
                            <h1>Список задач</h1>
                            <div className="header">
                                <span>Имя пользователя</span>
                                <Filters filter={filter} getAll={getAll} getExecuted={getExecuted} getNonExecuted={getNonExecuted}/>
                                <span>{data.length} задач, {data.filter(item => item.done).length} выполненных</span>
                            </div>
                            <TaskList tasks={tasksForRender} deleteTask={deleteTask} handleCheckboxChange={handleCheckboxChange}/>
                            <div className="generalActions">
                                <AddTaskForm addTask={addTask}/>
                                <DeleteExecutedTasksButton deleteExecuted={deleteExecuted}/>
                            </div>
                        </section>
                }/>
                <Route path="task/:id" exact render={(match)=>{
                    const taskNumber = match.params.id;
                    return <TaskEdit taskNumber={taskNumber} allTasks={data}/>
                }}/>
            </Switch>
        </Router>
    </>
)
}