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

@@ -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();
+    });
+  });
 });

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,