Encounter error in installing react router

Question

I want to install react-router in my project with command npm install react-router-dom but this is not working and there is an error.

up to date, audited 1469 packages in 5s

226 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

I can't understand this please help me in understanding this I am providing my App.js code here where I am using routing.

import React, { useEffect, useState } from 'react';
import about from './MyComponents/about.js';
import Header from './MyComponents/Header.js';
import Todos from './MyComponents/Todos';
import Footer from './MyComponents/Footer';
import { AddTodo } from './MyComponents/AddTodo';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  let initTodo;
  if (localStorage.getItem("todos") === null) {
    initTodo = [];
  } else {
    initTodo = JSON.parse(localStorage.getItem("todos")) // takes a JSON string and then transforms it into a JavaScript object
  }
  const mytitle = "My-Todos-List" // This should be a const is non-editable
  const [todos, setTodo] = useState(initTodo); // here I use lazy initialization. I leave you a link below to read about it

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos])

  // and then you can write your handlers that use `useState` todos and setTodo without warnings
  const onDelete = (todo) => {
    setTodo(todos.filter((e) => {
      return e !== todo;
    }))
    localStorage.setItem("todos", JSON.stringify(todos)); // takes a JavaScript object and then transforms it into a JSON string.
  }

  const addTodo = (title, desc) => {
    let sno;
    if(todos.length == 0) {
      sno = 1;
    } else {
      sno = todos[todos.length - 1].sno + 1
    }
    const mytodo = {
      sno: sno,
      title: title,
      description: desc
    }
    setTodo([...todos, mytodo]);
  }
  
  return (
    <>
      <Router>
        <Header title1={mytitle} searchBar={true}/>
        <Switch>
          <Route
            exact
            path="/"
            render={() => {
              return (
                <>
                  <AddTodo addtodo={addTodo} />
                  <Todos todos={todos} onDelete={onDelete} />
                </>
              )
            }}
          >
          </Route>
          <Route exact path="/about">
            <About />
          </Route>  
        </Switch>
        <Footer />
      </Router>
    </>
  );
  // I want to render my header and footer all the time but not addtodo and todos because I want to render them when slash / is my end point
}

export default App;

I have searched and I found different commands I am giving link of that question and its answer where I found commands please have a look Failed to compile. Module not found: Can't resolve 'react-router-dom'.

Please suggest me which command should I run because this command also disturbs my server. Now the server also doesn't run and has an error like:

node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module '@babel/plugin-syntax-class-properties'
Require stack:
- D:\React projects\todos-list\node_modules\@babel\preset-env\lib\available-plugins.js
- D:\React projects\todos-list\node_modules\@babel\preset-env\lib\filter-items.js
- D:\React projects\todos-list\node_modules\@babel\preset-env\lib\index.js
- D:\React projects\todos-list\node_modules\workbox-build\build\lib\bundle.js
- D:\React projects\todos-list\node_modules\workbox-webpack-plugin\build\generate-sw.js
- D:\React projects\todos-list\node_modules\workbox-webpack-plugin\build\index.js
- D:\React projects\todos-list\node_modules\react-scripts\config\webpack.config.js
- D:\React projects\todos-list\node_modules\react-scripts\scripts\start.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (D:\React projects\todos-list\node_modules\@babel\preset-env\lib\available-plugins.js:8:36)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\React projects\\todos-list\\node_modules\\@babel\\preset-env\\lib\\available-plugins.js',
    'D:\\React projects\\todos-list\\node_modules\\@babel\\preset-env\\lib\\filter-items.js',
    'D:\\React projects\\todos-list\\node_modules\\@babel\\preset-env\\lib\\index.js',
    'D:\\React projects\\todos-list\\node_modules\\workbox-build\\build\\lib\\bundle.js',
    'D:\\React projects\\todos-list\\node_modules\\workbox-webpack-plugin\\build\\generate-sw.js',
    'D:\\React projects\\todos-list\\node_modules\\workbox-webpack-plugin\\build\\index.js',
    'D:\\React projects\\todos-list\\node_modules\\react-scripts\\config\\webpack.config.js',
    'D:\\React projects\\todos-list\\node_modules\\react-scripts\\scripts\\start.js'
  ]
}