added router

src/App.tsx

@@ -1,10 +1,18 @@
 import React from "react"
 import FileBrowser from "./components/FileBrowser"
-
+import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"
+import NotFound from "./components/NotFound"
+  
 const App: React.FC = () => {
 	return (
 		<div>
-			<FileBrowser/>
+			<Router>
+				<Switch>
+					<Route path="/f/" component={FileBrowser}/>
+					<Redirect from="/" exact to="/f/" />
+					<Route path="*" component={NotFound} />
+				</Switch>
+			</Router>
 		</div>
 	)
 }

src/components/FileBrowser.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { useState } from "react"
 import { useContextMenu } from "react-contexify"
+import { RouteComponentProps } from "react-router-dom"
 import normalizeDirPath from "../functions/normalizeDirPath"
 import uploadFile from "../functions/uploadFile"
 import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
@@ -12,8 +13,18 @@ import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 import FileUploadButton from "./FileUploadButton"
 
-const FileBrowser: React.FC = () => {
-	const [path,setPath] = useState("/")
+function uriToPath(pathname:string) {
+	// strip the "/f" from e.g. "/f/dir1/dir2"
+	return pathname.substr(2)
+}
+
+function pathToUri(path:string) {
+	return (path.startsWith("/")?"/f":"/f/") + path
+}
+
+const FileBrowser: React.FC<RouteComponentProps> = (props) => {
+	const path = uriToPath(props.location.pathname)
+
 	const [openFileId, setOpenFileId] = useState("")
 	const [showFile, setShowFile] = useState(false)
 
@@ -113,7 +124,7 @@ const FileBrowser: React.FC = () => {
 			>
 				<div className="flex justify-between">
 					<Breadcrum path={path} onDirClick={(newPath)=>{
-						setPath(normalizeDirPath(newPath))
+						props.history.push(pathToUri(newPath))
 					}}/>
 					<div className="ml-auto">
 						<CreateDirButton 
@@ -150,7 +161,7 @@ const FileBrowser: React.FC = () => {
 								key={v?.id}
 								dir={v}
 								onClick={(dir)=>{
-									setPath(normalizeDirPath(dir.id))
+									props.history.push(pathToUri(dir.id))
 								}}
 								onContextMenu={(e)=>{
 									openDirContextMenu(e,v.id)

src/components/NotFound.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { NavLink, RouteComponentProps } from "react-router-dom"
+
+const NotFound: React.FC<RouteComponentProps> = (props) => {
+	return <div className="dark:text-gray-300">
+		<div className="flex justify-center">
+			<h1 className="text-9xl " >404</h1>
+		</div>
+		<div className="flex justify-center text-4xl mb-3">
+            &quot;{props.location.pathname}&quot; not found.
+		</div>
+		<div className="flex justify-center text-4xl underline">
+			<NavLink to="/">Go back</NavLink>
+		</div>
+	</div>
+}
+
+export default NotFound