React Router v6 applied

public/dist/main.js.LICENSE.txt

@@ -4,17 +4,30 @@ object-assign
 @license MIT
 */
 
-/** @license React v0.20.2
- * scheduler.production.min.js
+/**
+ * React Router DOM v6.2.1
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Remix Software Inc.
  *
  * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
  */
 
-/** @license React v16.13.1
- * react-is.production.min.js
+/**
+ * React Router v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *

public/src/components/MusicPanel.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import axios from "axios"
 
 // components
@@ -90,24 +90,14 @@ const MusicPanel = () => {
     <Router>
       <div className="music-panel">
         <NavBar links={links} active={active} makeActiveLink={makeActiveLink} />
-        <Switch>
+        <Routes>
           <Route
-            exact
             path="/"
-            render={(props) => (
-              <SongsPanel
-                {...props}
-                songs={songs}
-                changeRating={changeRating}
-              />
-            )}
+            element={<SongsPanel songs={songs} changeRating={changeRating} />}
           />
 
-          <Route
-            path="/topfive/"
-            render={(props) => <TopFivePanel songs={songs} />}
-          />
-        </Switch>
+          <Route path="/topfive/" element={<TopFivePanel songs={songs} />} />
+        </Routes>
       </div>
     </Router>
   )