How to implement deep links in v3?

[ptmkenny]

I'm trying to test out the release candidate of capacitor v3. I've installed all the needed plugins, but I've also implemented deep links in my app using the react example code from the docs:

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Plugins } from '@capacitor/core';
const { App: CapApp } = Plugins;

const AppUrlListener: React.FC<any> = () => {
  let history = useHistory();
  useEffect(() => {
    CapApp.addListener('appUrlOpen', (data: any) => {
      // Example url: https://beerswift.app/tabs/tab2
      // slug = /tabs/tab2
      const slug = data.url.split('.app').pop();
      if (slug) {
        history.push(slug);
      }
      // If no match, do nothing - let regular routing
      // logic take over
    });
  }, []);

  return null;
};

export default AppUrlListener;

However, this uses a call to Plugins, which no longer works; I get this TypeScript error:

×
TypeError: Cannot read property 'addListener' of undefined
(anonymous function)
src/components/AppUrlListener.tsx:24
  21 | 
  22 | const history = useHistory();
  23 | useEffect(() => {
> 24 |   CapApp.addListener('appUrlOpen', (data: any) => {

How can I update this component for use with v3?

[jcesarmobile]

In Capacitor 3 all plugins have been moved out of core, you now have to install the plugins you want to use independently.

https://capacitorjs.com/docs/v3/updating/3-0#official-plugins

So you don't import Plugins from core anymore, you use the plugin directly from the plugin package

https://capacitorjs.com/docs/v3/updating/3-0#plugin-imports

[ptmkenny]

Thanks, this is what worked for me:

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const { App as CapApp } from '@capacitor/app';

const AppUrlListener: React.FC<any> = () => {
  let history = useHistory();
  useEffect(() => {
    CapApp.addListener('appUrlOpen', (data: any) => {
      // Example url: https://beerswift.app/tabs/tab2
      // slug = /tabs/tab2
      const slug = data.url.split('.app').pop();
      if (slug) {
        history.push(slug);
      }
      // If no match, do nothing - let regular routing
      // logic take over
    });
  }, []);

  return null;
};

export default AppUrlListener;