Push a new state when query box is emptied

src/App.jsx

@@ -14,6 +14,11 @@ function App() {
 	function queryOnChange () {
 		let query = inputSearch.current.value
 		query = query.replace(/[^a-zA-Z0-9\- ]/, "")
+
+		if (query == '') {
+			history.pushState('', '', '#')
+		}
+
 		setCurrentQuery(query)
 		dispatch(setQuery(query))
 	}
@@ -27,15 +32,33 @@ function App() {
 		dispatch(setShowName(checkShowName.current.checked))
 	}
 
+	function confirmKeyword (e) {
+		if (e.key === 'Enter') {
+			history.pushState('', '', '#' + inputSearch.current.value)
+			inputSearch.current.blur()
+		}
+	}
+
+	const handleHashChange = (e) => {
+		// console.log(e)
+		inputSearch.current.value = window.location.hash.replace("#", "")
+		queryOnChange()
+	};
+
 	useEffect(() => {
 		inputSearch.current.focus()
 		queryOnChange()
+
+		window.addEventListener('hashchange', handleHashChange)
+		return () => {
+			window.removeEventListener('hashchange', handleHashChange)
+		}
 	})
 
 	return (
 		<>
 			<div className="pixel-input">
-				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } value={ currentQuery } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
+				<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } onKeyDown={ confirmKeyword } value={ currentQuery } placeholder="Search an icon — try 'animal', 'fruit', 'logo', 'ui' or 'red'" autoComplete='no' />
 				{
 					currentQuery == '' ? '' : <button id='btn-clear-search' onClick={ clearQuery }>x</button>
 				}