bgenc.net/content/posts/2022.05.09.react-navigation-web-browser-history-with-link.md

title	date	toc	images	tags
React Navigation on web, getting browser history to work with links	2022-05-09T04:12:24-04:00	false		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 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:

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>
  );
}