How to use deep links with react router dom?

[fluid herald]

Hi,

I am trying to use deep links for my windows desktop application, so I have the onOpen callback function from the deeplinks tauri plugin in my index.tsx, once a deep link is openend it should change the pathname to the deeplink that was received.

However I run into an issue, at that point the reactrouter is not loaded yet, meaning that a 404 is shown instead.

So I was wondering if anyone has dealt with using deeplinks and react router dom?

[tulip crystal]

maybe delay it and call getCurrent() when you're router is ready/mounted

this will be required on the next plugin release anyway because then onOpen doesn't call getCurrent internally anymore

[fluid herald]

I currently have this, but I don't know how I can now deal with the deep link being opened while the application is already open?

    const navigate = useNavigate();

    useAsyncEffect(async () => {
        const urls = await getCurrent();

        console.log(urls);

        if (urls != null) navigate(urls[0].split("quella://")[1]);

    }, [])

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_single_instance::init(|_app, argv, _cwd| {
            println!("a new app instance was opened with {argv:?} and the deep link event was already triggered");
            // when defining deep link schemes at runtime, you must also check `argv` here
        }))
        .plugin(tauri_plugin_deep_link::init())
        .setup(|app| {
            // Deep Link setup for Windows and Linux
            #[cfg(any(windows, target_os = "linux"))]
            {
                use tauri_plugin_deep_link::DeepLinkExt;
                app.deep_link().register_all()?;
            }

            // Debug logging setup
            if cfg!(debug_assertions) {
                app.handle().plugin(
                    tauri_plugin_log::Builder::default()
                        .level(log::LevelFilter::Info)
                        .build(),
                )?;
            }

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

with onOpen I could atleast change up the UI once a deeplink was opened during the period an application was already open

[hazy slate]

I am guessing that the index.tsx is at a higherlevel that where your <BrowserRouter /> or createBrowserRouter is defined. One way you can do this is to create a hook and stick it somewhere after the browser component but at a high level. Something like
<BrowserRouter>
<Layout> // defined your hook with onOpenUrl here
{children}
</Layout>
</BrowserRouter>

You can see an example in this ticket
https://github.com/tauri-apps/plugins-workspace/issues/1879#issuecomment-2459685504

This is using the listen directly, or the onOpenUrl. As Lars, mentioned though, if you want the current, you will have to do that explictly in the next plugin release. Right now, it does that for you.

[fluid herald]

@hazy slate how so?

like what would the hook look like?

Because I have no clue what you mean

What I did currently is move my BrowserRouter component outside of my App component

and now in the App component I am trying to handle the redirect

the thing I would like to do is to redirect the user when they click another deeplink with the app open

[hazy slate]

@fluid herald , here is an example of hook i ended up using
https://github.com/tauri-apps/plugins-workspace/issues/1879#issuecomment-2460901380
I have this hook in a top-level layout component. It opens the deeplink if the app is opened by the deeplink and it registers the listener for new deeplinks after the app is open.

[fluid herald]

Alright thanks!

[fluid herald]

@tulip crystal is there any way you can actually clear this getCurrent out, so when I refresh the app it doesn't just trigger the deeplink once again

[tulip crystal]

no

i mean, on a technical level yes of course, but there's nothing implemented (yet?) that would make it possible for you in your app

[fluid herald]

okay

I would like to avoid re trigger the deep link

when I refresh the application