Redirect on button click not working - v6

I want to redirect users to another route on button click.

Here is my button:

<button type="button"
                                class="button button-large button-fill button-preloader ${isLoading ? 'button-loading' : ''}"
                <span class="preloader"><span class="preloader-inner">
    <svg viewBox="0 0 36 36">
      <circle cx="18" cy="18" r="16"></circle>

And here is my script tag from same component:

    export default (props, { $f7router, $f7, $update, $on }) => {
        let isLoading = false;

        const load = () => {
            isLoading = true;
            setTimeout(() => {
                isLoading = false;
            }, 1000);

        return $render;

But I am getting this error on button click:

Uncaught TypeError: Cannot read properties of undefined (reading 'router')

i have also tried:


but this time it throws:

Uncaught Error: Framework7: it is not allowed to use router methods on global app router. Use router methods only on related View, e.g. app.views.main.router.navigate(...)

I know this question might be a repeat one, but I am unable to fix this issue and redirect. I am using v6.3.14 of Framework7 Core. The code used to work earlier but dont know why it doesnt work now.

pay attention, if your button is on some pages then you can do it, if button is on popup or some extra components, then u need to set app.view.router