Get everything after the prefix as a param with Deeplinking and React-Navigation-5

Question

I am using react-navigation-5 and deeplinking. I would like to extract everything after the deeplink prefix and pass it as a param.

I have the following

const deeplinking = {
    prefixes: ['myapp://'],
    config: {
      Store: {
        path:'store/:url' ,
        params: {
          url: null,      
        },
      }
  }
  };

  return (
    <NavigationContainer linking={deeplinking}>
      <Stack.Navigator initialRouteName="Splash" screenOptions={{ headerShown: false,   cardStyle: { backgroundColor: '#fff' } }}>
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Store" component={Store} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

If I use the following deep-link:

myapp://alpha/delta/gamma

The url parameter becomes:

'alpha'

So the first forward-slash / encountered after the prefix and everything after it is getting stripped out when the deeplink is passed.

I want the parameter (url in the above example), to be:

'alpha/delta/gamma'

How can I achieve this?

I have checked the docs here: https://reactnavigation.org/docs/deep-linking/ https://reactnavigation.org/docs/configuring-links/

But they do not mention how to deal with forward slashes.

score 0 · Answer 1 · answered Jun 26 '22 at 21:41

  config: {
    screens: {
      deeplink: {
        path: 'deeplink/id',
      },
    },
  },
}
Make deeplink url:
https://example.com/deeplink/details?token=uygiuhiuhpuihpiuyiuhuihhiluhiu

Access token from component:
this.props.route.params.token

result will be =uygiuhiuhpuihpiuyiuhuihhiluhiu

Get everything after the prefix as a param with Deeplinking and React-Navigation-5

1 Answers1