How to use hash '#' in the URL with @react-navigation

Question

I am working with react native web, where @react-navigation is used for navigation. I am using linking so that users can navigate using the URL.

my linking configuration looks like

const linking = {
  prefixes: [],
  config: {
    screens: {
      Home: '',
      Profile: 'profile',
      Settings: 'settings',
      NotFound: '*',
    },
  },
};

The problem is I would like to pass a parameter using # in the URL. For an example, localhost:19006/profile#address or localhost:19006/profile#about But when I try the above URL, react-navigation automatically removes #address / #about from the URL.

I went through https://reactnavigation.org/docs/configuring-links/

I can pass the parameter like localhost:19006/profile?sec=address easily, But I want to use # in the URL.

Is there any way to use # in the URL?

Note I am using the following libraries

"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"react-native": "0.67.3",
"react-native-web": "^0.17.7",

score 2 · Answer 1 · edited Oct 31 '22 at 20:14

2

you need to import Linking from the react native.

import {Linking} from 'react-native

and whenever you need to open a URL with a click event you can code below.

Linking.openURL( "Your Link");

Might be it helpful to you.

edited Oct 31 '22 at 20:14

Brad Larson

170,088
45
397
571

answered Aug 03 '22 at 09:27

Ankit Vora

568
2
12

No, I do not want a click event. I want to browse directly `localhost:19006/profile#address`, But whenever I hit enter, `#address` is removed from the URL automatically. – Shaon Debnath Aug 10 '22 at 10:17
Did you find how ? – heberuriegas Aug 30 '23 at 13:42

How to use hash '#' in the URL with @react-navigation

1 Answers1