feature: navigate component

assets/react-router/README.md.template

@@ -37,6 +37,19 @@ return (
   </Home.NavLink>
 );
 ```
+
+For navigate when it is rendered, use the `Navigate` component (built on top of `Navigate`) to change the current location to other page. For example:
+
+```tsx
+import { SignIn, Home } from "{{routes}}";
+
+if (!isAuthorized) return <SignIn.Navigate />;
+
+return <Home.Navigate />;
+```
+
+This is the equivalent of doing `<Navigate to="/sign-in" />` with in a component.
+
 # Configure declarative-routing
 
 After running `npx declarative-routing init`, you don't need to configure anything to use it.

assets/react-router/makeRoute.tsx

@@ -5,6 +5,8 @@ import { ZodSchema, z } from "zod";
 import queryString from "query-string";
 import {
   Link,
+  Navigate,
+  NavigateProps,
   NavLink,
   useParams as useParmsRR,
   useSearchParams as useSearchParamsRR,
@@ -61,6 +63,9 @@ export type RouteBuilder<
       search?: z.input<Search>;
     } & { children?: React.ReactNode }
   >;
+  Navigate: React.FC<
+    Omit<NavigateProps, "to"> & z.input<Params> & { search?: z.input<Search> }
+  >;
 
   params: z.output<Params>;
   paramsSchema: Params;
@@ -274,6 +279,24 @@ export function makeRoute<
     );
   };
 
+  routeBuilder.Navigate = function RouteLink({
+    search: linkSearch,
+    ...props
+  }: Omit<NavigateProps, "to"> &
+    z.input<Params> & { search?: z.input<Search> }) {
+    const params = info.params.parse(props);
+    const extraProps = { ...props };
+    for (const key of Object.keys(params)) {
+      delete extraProps[key];
+    }
+    return (
+      <Navigate
+        {...props}
+        to={routeBuilder(info.params.parse(props), linkSearch)}
+      />
+    );
+  };
+
   routeBuilder.params = undefined as z.output<Params>;
   routeBuilder.paramsSchema = info.params;
   routeBuilder.search = undefined as z.output<Search>;

examples/react-router/finished/src/routes/README.md

@@ -37,6 +37,19 @@ return (
   </Home.NavLink>
 );
 ```
+
+For navigate when it is rendered, use the `Navigate` component (built on top of `Navigate`) to change the current location to other page. For example:
+
+```tsx
+import { SignIn, Home } from "./src/routes";
+
+if (!isAuthorized) return <SignIn.Navigate />;
+
+return <Home.Navigate />;
+```
+
+This is the equivalent of doing `<Navigate to="/sign-in" />` with in a component.
+
 # Configure declarative-routing
 
 After running `npx declarative-routing init`, you don't need to configure anything to use it.

examples/react-router/finished/src/routes/makeRoute.tsx

@@ -5,6 +5,8 @@ import { ZodSchema, z } from "zod";
 import queryString from "query-string";
 import {
   Link,
+  Navigate,
+  NavigateProps,
   NavLink,
   useParams as useParmsRR,
   useSearchParams as useSearchParamsRR,
@@ -61,6 +63,9 @@ export type RouteBuilder<
       search?: z.input<Search>;
     } & { children?: React.ReactNode }
   >;
+  Navigate: React.FC<
+    Omit<NavigateProps, "to"> & z.input<Params> & { search?: z.input<Search> }
+  >;
 
   params: z.output<Params>;
   paramsSchema: Params;
@@ -274,6 +279,24 @@ export function makeRoute<
     );
   };
 
+  routeBuilder.Navigate = function RouteLink({
+    search: linkSearch,
+    ...props
+  }: Omit<NavigateProps, "to"> &
+    z.input<Params> & { search?: z.input<Search> }) {
+    const params = info.params.parse(props);
+    const extraProps = { ...props };
+    for (const key of Object.keys(params)) {
+      delete extraProps[key];
+    }
+    return (
+      <Navigate
+        {...props}
+        to={routeBuilder(info.params.parse(props), linkSearch)}
+      />
+    );
+  };
+
   routeBuilder.params = undefined as z.output<Params>;
   routeBuilder.paramsSchema = info.params;
   routeBuilder.search = undefined as z.output<Search>;