From 45a331d690ad77f17a38b8384e9f1574b3a828b3 Mon Sep 17 00:00:00 2001
From: Kaan Barmore-Genc <kaan@bgenc.net>
Date: Mon, 9 May 2022 04:36:43 -0400
Subject: [PATCH] add react navigation browser history links

---
 ...5.01.react-navigation-path-as-parameter.md | 12 +++-
 ...avigation-web-browser-history-with-link.md | 59 +++++++++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 content/posts/2022.05.09.react-navigation-web-browser-history-with-link.md

diff --git a/content/posts/2022.05.01.react-navigation-path-as-parameter.md b/content/posts/2022.05.01.react-navigation-path-as-parameter.md
index 8582e5c..8305368 100644
--- a/content/posts/2022.05.01.react-navigation-path-as-parameter.md
+++ b/content/posts/2022.05.01.react-navigation-path-as-parameter.md
@@ -1,6 +1,7 @@
 ---
 title: "Using a path as a parameter in React Navigation"
 date: 2022-05-01T17:49:02-04:00
+lastmod: 2022-05-09T04:28:00-04:00
 draft: true
 toc: false
 images:
@@ -117,7 +118,8 @@ export const LINKING = {
     return state;
   },
   getPathFromState: (state: any, config: any) => {
-    const route = state.routes[0];
+    // Getting the "top route" if we're using a stack navigator
+    const route = state.routes[state.routes.length - 1];
     // For the Dashboard routes only...
     if (route?.name === "Dashboard") {
       // ...directly put the path into the URL
@@ -133,3 +135,11 @@ export const LINKING = {
 I'm not sure how the get the types to be a little nicer, but just going with
 `any` is fine for me in this case since it's a very small portion of the
 codebase.
+
+
+> Edit: Made the following change after noticing that this code didn't work with a stack navigator
+> 
+> ```ts
+> // Getting the "top route" if we're using a stack navigator
+> const route = state.routes[state.routes.length - 1];
+> ```
\ No newline at end of file
diff --git a/content/posts/2022.05.09.react-navigation-web-browser-history-with-link.md b/content/posts/2022.05.09.react-navigation-web-browser-history-with-link.md
new file mode 100644
index 0000000..33e6719
--- /dev/null
+++ b/content/posts/2022.05.09.react-navigation-web-browser-history-with-link.md
@@ -0,0 +1,59 @@
+---
+title: "React Navigation on web, getting browser history to work with links"
+date: 2022-05-09T04:12:24-04:00
+toc: false
+images:
+tags:
+  - dev
+  - react
+  - javascript
+  - typescript
+---
+
+I've hit another issue with React Navigation when building it with React Native for Web.
+The issue is with the browser history integration and `<Link>`s.
+React Navigation supports browser [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
+when targeting the web, but it wouldn't add new URLs to the history when navigating
+using `<Link to=...` elements. That meant you can't hit the back button in the browser to navigate back.
+I think the issue specifically happens with the stack navigator, but I'm not sure.
+
+In any case, turns out the problem was because the links are not using the right
+action to navigate to that path, which means the navigator does not have the
+right history. The solution is luckily easy, you need to pass the `action`
+property to the link to tell it how to navigate. To make this foolproof, I
+created wrapper component to handle it, here's what it looks like:
+
+```ts
+import React from "react";
+import { Link, StackActions } from "@react-navigation/native";
+import { TextProps } from "react-native";
+// This is the type defining all the routes. It looks like:
+// 
+// export type RoutingStackParams = {
+//   Login: undefined;
+//   Dashboard: {
+//     path: string;
+//     isFile: boolean;
+//   };
+// };
+import { RoutingStackParams } from "./routes";
+
+export function BLink<Route extends keyof RoutingStackParams>(
+  props: TextProps & {
+    screen: Route;
+    params: RoutingStackParams[Route];
+  },
+) {
+  return (
+    <Link
+      to={{
+        screen: props.screen,
+        params: props.params,
+      }}
+      action={StackActions.push(props.screen, props.params)}
+    >
+      {props.children}
+    </Link>
+  );
+}
+```