Link is not redirecting please help

[Danish-Ali097]

Hi, i'm learning react and i am working on a todo list project for learning purpose and i'm facing provblem with redirecting.

when i click on the link the path is shown in the address bar but its not redirecting for some reason

App.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import './App.css';
import List from './components/list';
import NavBar from './components/navbar';
import Input from './components/input';
import Edit from './components/edit';
import Delete from './components/delete';


class App extends Component {
  state={
    id:0,
    items:[]
  };

  onHandleSubmit = (value) => {
    console.log('App', value);
    let count = this.state.items.filter(i => i.text.toLowerCase() === value.toLowerCase()).length;
    if(count === 0 && value !== ""){ 
      let items = this.state.items;
      let id = this.state.id;
      id++;
      items.push({id:id,text:value});

      this.setState({id,items});
    }
  }

  handleDelete = (id) =>{
    console.log('App - delete', id);
  }

  handleEdit = (item) =>{
    console.log('App - item', item);
  }

  render(){
    return (
      <React.Fragment>
        <NavBar/>
        <div className="container">
          <Router>
          
            <Switch>
              <Route path="/" exact>
                <Input onSubmit = {this.onHandleSubmit}/>
                <List items={this.state.items}/>
              </Route>
              <Route path="/edit/:id" exact>
                <Edit onEdit = {this.handleEdit} items={this.state.items}/>
              </Route>
              <Route path="/delete/:id" exact>
                <Delete onDelete = {this.handleDelete}/>
              </Route>
            </Switch>
          
          </Router>
        </div>
      </React.Fragment>
    );
  }
}

export default App;

list.js

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";

function List(props) {
  return (
    <div>
      <ul className="list-group">
        <Router>
          {props.items.map((item) => (
            <li
              key={item.id}
              className="list-group-item d-flex justify-content-between align-items-center"
            >
              {item.text}
              <span>
                <Link
                  to={"/edit/" + item.id}
                  className="btn btn-primary btn-xs m-2"
                >
                  Edit
                </Link>
                <Link
                  to={"/delete/" + item.id}
                  className="btn btn-primary btn-xs m-2"
                >
                  Delete
                </Link>
              </span>
            </li>
          ))}
        </Router>
      </ul>
    </div>
  );
}

export default List;