handle go back events

frontend/src/index.js

 import React, { createContext, useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, useNavigationType } from "react-router-dom";
 import useWebSocket from "react-use-websocket";
 import axios from "axios";
 
@@ -41,6 +41,8 @@ export default function App() {
   }, [reload]);
 
   useEffect(() => {
+    window.addEventListener("popstate", () => setReload(true));
+
     let path = window.location.pathname.split("/");
     if (restaurantsList && path.length >= 2 && path[1]) {
       let name = decodeURIComponent(path[1]);
@@ -48,7 +50,11 @@ export default function App() {
       if (filter) {
         setSelection(filter[0]);
       }
+    } else {
+      setSelection(null);
     }
+
+    return () => window.removeEventListener("popstate", () => setReload(true));
   }, [restaurantsList]);
 
   useEffect(() => {