Step 18: Routing

Update the App.jsx as follows:

  import { useEffect, useState } from "react";
  import { faker } from "@faker-js/faker";
- import { Container } from "@mantine/core";
+ import { Routes, Route } from "react-router-dom";
  import Edit from "./pages/Edit";
  import Home from "./pages/Home";
	
  function App() {
	
    return (
-     <Container>
-       <Home
-         notes={notes}
-         query={query}
-         setQuery={setQuery}
-         add={add}
-         remove={remove}
-       />
-       <Edit />
-     </Container>
+     <Routes>
+       <Route
+         path="/"
+         element={
+           <Home
+             notes={notes}
+             query={query}
+             setQuery={setQuery}
+             add={add}
+             remove={remove}
+           />
+         }
+	      />
+       <Route path="/edit" element={<Edit />} />
+     </Routes>
    );
  }

The  component looks through all its children  elements and renders the first one whose path matches the current URL.

Save the files and run the application. Open http://localhost:5173/ to view it in the browser. Then update the URL to http://localhost:5173/edit to navigate to the Edit page. Use the browser's back button to return to the homepage.