Browse Source

add react navigation browser history links

main
Kaan Barmore-Genç 2 weeks ago
parent
commit
45a331d690
No known key found for this signature in database
GPG Key ID: 362529CF3A326F16
  1. 12
      content/posts/2022.05.01.react-navigation-path-as-parameter.md
  2. 59
      content/posts/2022.05.09.react-navigation-web-browser-history-with-link.md

12
content/posts/2022.05.01.react-navigation-path-as-parameter.md

@ -1,6 +1,7 @@ @@ -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 = { @@ -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 = { @@ -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];
> ```

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

@ -0,0 +1,59 @@ @@ -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>
);
}
```
Loading…
Cancel
Save