adding react router & setting up results page

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "sass": "^1.49.9",
     "web-vitals": "^2.1.4"

src/App.js

@@ -1,3 +1,4 @@
+import { Routes, Route } from 'react-router-dom';
 import './assets/styles/app.scss';
 
 import Categories from './data/categories.json';
@@ -10,16 +11,10 @@ console.log(Categories);
 function App() {
   return (
     <div className="container">
-      <Form />
-      {
-        /* Categories.map( category => {
-          return(
-            <div className="box" key={ category.id }>
-              { category.name }
-            </div>
-          )
-        }) */
-      }
+      <Routes>
+        <Route path="/" element={<Form />}/>
+        <Route path="/results" />
+      </Routes>
       <Footer />
     </div>
   );

src/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );