@aminnairi/react-router 1.0.0 → 1.1.0

package/README.md

@@ -735,6 +735,40 @@ createPage({
 });
 ```
 
+### useLink
+
+Allow you to navigate to another page using a JSX component instead of a callback as for the `useNavigateToPage` hook.
+
+The created component is simply a `<a href="...">{children}</a>` under the hood which prevents the default behavior of the navigator which is to create a new HTTP request and to reload the page. The `href` attribute is computed from the page path and its parameters.
+
+```tsx
+import { Fragment } from "react";
+import { createPage, useLink } from "@aminnairi/react-router";
+
+const user = createPath({
+  path: "/users/:user",
+  element: function User({ parameters: { user }}) {
+    return (
+      <h1>User#{user}</h1>
+    );
+  }
+});
+
+createPage({
+  path: "/about",
+  element: function About() {
+    const Link = useLink(user);
+
+    return (
+      <Fragment>
+        <h1>About</h1>
+        <Link parameters={{ user: "123" }}>User#123</Link>
+      </Fragment>
+    );
+  }
+});
+```
+
 ### useSearch
 
 Allow you to get one or more search query from the URL.
@@ -976,10 +1010,40 @@ See [`LICENSE`](./LICENSE).
 
 ### Versions
 
+- [`1.1.0`](#110)
+- [`1.0.1`](#101)
 - [`1.0.0`](#100)
 - [`0.1.1`](#011)
 - [`0.1.0`](#010)
 
+### 1.1.0
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+- Added a new `useLink` hook to create components that allow for navigating to another page
+
+#### Bug & security fixes
+
+None.
+
+### 1.0.1
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+None.
+
+#### Bug & security fixes
+
+- Fixed an issue when navigating to a page that already starts with a slash
+
 ### 1.0.0
 
 #### Major changes

package/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext } from "react";
+import { useEffect, useState, FunctionComponent, useMemo, Component, PropsWithChildren, createContext, SetStateAction, Dispatch, ReactNode, useContext, useCallback, memo, MouseEvent } from "react";
 
 export type AbsolutePath<Path extends string> =
   Path extends `${infer Start}:${string}/${infer Rest}`
@@ -39,11 +39,11 @@ export interface FindPageOptions {
 }
 
 export const sanitizePath = (path: string): string => {
-  return "/" + path
-    .replace(/^\/|\/$/g, "")
-    .replace(/\/+/g, "/");
+  const sanitizedPath = path.replace(/\/+/g, "/").replace(/^\/|\/$/g, "")
+  return "/" + sanitizedPath;
 }
 
+
 export const createPage = <Path extends string>(page: Page<Path>) => {
   return page
 }
@@ -180,10 +180,12 @@ const Context = createContext<ContextInterface>({
 export const useNavigateToPage = <Path extends string>(page: Page<Path>) => {
   const { prefix } = useContext(Context);
 
-  return (parameters: Parameters<Path>, replace: boolean = false) => {
+  return useCallback((parameters: Parameters<Path>, replace: boolean = false) => {
+    const initialPath = sanitizePath(`${prefix ?? ""}/${page.path}`);
+
     const pathWithParameters = Object.entries(parameters).reduce((path, [parameterName, parameterValue]) => {
       return path.replace(`:${parameterName}`, parameterValue);
-    }, sanitizePath(`${prefix ?? ""}/${page.path}`));
+    }, initialPath);
 
     if (replace) {
       window.history.replaceState(null, pathWithParameters, pathWithParameters);
@@ -192,7 +194,7 @@ export const useNavigateToPage = <Path extends string>(page: Page<Path>) => {
     }
 
     window.dispatchEvent(new CustomEvent("popstate"));
-  }
+  }, [page]);
 };
 
 export const useIsActivePage = (page: Page<string>) => {
@@ -212,6 +214,35 @@ export const useHash = () => {
   return hash;
 };
 
+export const useLink = <Path extends string>(page: Page<Path>) => {
+  const Link = memo(({ children, parameters }: { children: ReactNode, parameters: Parameters<Path> }) => {
+    const { prefix } = useContext(Context);
+    const navigateToPage = useNavigateToPage(page);
+
+    const pathWithParameters = useMemo(() => {
+      return Object.entries(parameters).reduce((previousPath, [parameterName, parameterValue]) => {
+        return previousPath.replace(`:${parameterName}`, parameterValue);
+      }, sanitizePath(`${prefix ?? ""}/${page.path}`));
+    }, []);
+
+    const navigate = useCallback((event: MouseEvent) => {
+      event.preventDefault();
+      navigateToPage(parameters);
+    }, []);
+
+    return (
+      <a
+        href={pathWithParameters}
+        onClick={navigate}>
+        {children}
+      </a>
+    );
+
+  });
+
+  return Link;
+};
+
 export const createRouter = <Path extends string>({ pages, fallback, transition: withViewTransition, issue, prefix }: CreateRouterOptions<Path>) => {
   const Provider = ({ children }: ProviderProps) => {
     const [pathname, setPathname] = useState(sanitizePath(window.location.pathname));

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@aminnairi/react-router",
   "description": "Type-safe router for the React library",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/aminnairi/react-router#readme",
   "license": "MIT",
   "bugs": {