From 68ff9fc1723e409a407d706d81ce85bd0c731394 Mon Sep 17 00:00:00 2001
From: uhyo <uhyo@uhy.ooo>
Date: Thu, 11 Feb 2021 23:05:45 +0900
Subject: [PATCH] fix(react): react component can be now passed as an action

Now passing a React component instead of a simple function as an action won't cause an error.

fix #5
---
 src/react/hooks/useRoutes.test.tsx | 23 ++++++++++++++++++++++-
 src/react/hooks/useRoutes.tsx      |  6 +++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/react/hooks/useRoutes.test.tsx b/src/react/hooks/useRoutes.test.tsx
index 3eafe4e..da9e7b7 100644
--- a/src/react/hooks/useRoutes.test.tsx
+++ b/src/react/hooks/useRoutes.test.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import {
   isLocationNotFoundError,
   LocationNotFoundError,
@@ -203,4 +203,25 @@ describe("useRoutes", () => {
       expect(screen.queryByText("fugafuga")).toBeInTheDocument();
     });
   });
+  describe("React Component as action", () => {
+    it("1", () => {
+      const FooComponent = () => {
+        const loc = useState("foo");
+        return <p>I am {loc}</p>;
+      };
+      const location = {
+        pathname: "/foo",
+        state: null,
+      };
+      const routes = Path()
+        .route("foo", (foo) => foo.action(FooComponent))
+        .route("bar", (bar) => bar.action(() => <div>I AM BAR</div>));
+      const Component: React.FC = () => {
+        return useRoutes(routes);
+      };
+
+      renderInLocation(location, <Component />);
+      expect(screen.queryByText("I am foo")).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/react/hooks/useRoutes.tsx b/src/react/hooks/useRoutes.tsx
index 14626e8..7dec8d3 100644
--- a/src/react/hooks/useRoutes.tsx
+++ b/src/react/hooks/useRoutes.tsx
@@ -36,7 +36,11 @@ export const useRoutes = (builder: ReactRouteBuilder): ReactElement | null => {
       },
     });
 
-    const result = resolved.route.action(resolved.match as never);
+    // const result = resolved.route.action(resolved.match as never);
+    const result = React.createElement(
+      resolved.route.action,
+      resolved.match as never
+    );
     const routeContextValue = {
       route: resolved.route,
       ancestorRoutes,