60 lines
1.8 KiB
Markdown
60 lines
1.8 KiB
Markdown
|
---
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|