What to use now that base from "$app/paths" is being deprecated?

[peterreeves]

I've got a SvelteKit website that has it's base path set to something like /foo/bar, and I'm trying to have some logic to work out the page you're currently on so I can do things like highlight the link of where you are.

<script>
    import { page } from "$app/state";
    import { base, resolve } from "$app/paths";

    // Converts "/foo/bar/*" to "/*"
    const relPath = $derived(page.url.pathname.slice(base.length));
</script>

<a href={resolve("/")} class:active={relPath === "/"}>Home</p>
<a href={resolve("/my-page")} class:active={relPath === "/my-page"}>My Page</a>

<style>
    a.active {
        color: red;
    }
</style>

However, I'm getting a warning that base is deprecated. How can I get the value from the config so I don't have to hardcode "/foo/bar" throughout my code?

[peterreeves]

Just discovered page.route.id, which seems to do what I need.

[nightguarder]

I have used resolve

which seems to work fine.

import { resolve } from '$app/paths‘;
<nav>
    <a href={resolve('/')}>Home</a>
<nav>