Redirect on button click not working - v6

Questions
1

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' : ''}"
                                @click=${load}>
                <span class="preloader"><span class="preloader-inner">
    <svg viewBox="0 0 36 36">
      <circle cx="18" cy="18" r="16"></circle>
    </svg>
  </span>
                </span>
                            <span>proceed</span>
                        </button>

And here is my script tag from same component:

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

        const load = () => {
            isLoading = true;
            $update();
            setTimeout(() => {
                isLoading = false;
                $update();
                $f7.views.main.router.navigate("/home/");
            }, 1000);
        }

        return $render;
    }
</script>

But I am getting this error on button click:

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

i have also tried:

$f7router.navigate("/home/");

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.

2

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