Merge pull request #1 from maoryadin/draft/keen-waterfall

Update 3 files

.codesandbox/tasks.json

@@ -0,0 +1,36 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "yarn install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "start": {
+      "name": "start",
+      "command": "yarn start",
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "yarn build",
+      "runAtStart": false
+    },
+    "test": {
+      "name": "test",
+      "command": "yarn test",
+      "runAtStart": false
+    },
+    "eject": {
+      "name": "eject",
+      "command": "yarn eject",
+      "runAtStart": false
+    }
+  }
+}

src/navigation-router.js

@@ -1,6 +1,21 @@
 import { createContext, useContext, useEffect, useState } from "react";
 
-const RouterContext = createContext();
+const CreateRouterContext = () => {
+  const context = createContext(undefined);
+
+  const useRoute = () => {
+    const contextValue = useContext(context);
+
+    if (contextValue === undefined) {
+      throw new Error("useRoute must be used within a RouteProvider");
+    }
+    return contextValue;
+  };
+
+  return [useRoute, context.Provider];
+};
+
+const [useRoute, RouterContext] = CreateRouterContext();
 
 export const Router = ({ children }) => {
   // define the route.
@@ -10,21 +25,17 @@ export const Router = ({ children }) => {
     window.history.replaceState(null, null, route);
   }, [route]);
 
-  return (
-    <RouterContext.Provider value={{ route, setRoute }}>
-      {children}
-    </RouterContext.Provider>
-  );
+  return <RouterContext value={{ route, setRoute }}>{children}</RouterContext>;
 };
 
 export const Link = ({ to, children }) => {
-  const { setRoute } = useContext(RouterContext);
+  const { setRoute } = useRoute(RouterContext);
 
   return <div onClick={() => setRoute(to)}>{children}</div>;
 };
 
 export const Route = ({ path, children }) => {
-  const { route } = useContext(RouterContext);
+  const { route } = useRoute(RouterContext);
 
   return route === path ? children : null;
 };