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