Navigate two razor component automatically in Blazor template visual studio 2019

Question

I have two razor component with names of "new" and "second". How can i navigate them automatically, i mean when there is something to show navigate to new automatically and when there is nothing to show, navigate back to second automatically again.

Here is new: @page "/new"

<div class="Vistit">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-sm-8 ">


                    @foreach (var appointment in _visibleAppointments)
                    {
                        <div class="row mb-5">
                            <div class="col-sm-4"> <h1> @appointment.HeaderText: </h1> </div>

                            <div class="col-sm-8">
                                @foreach (var contactPerson in appointment.Contacts)
                                {
                                    <h1> @contactPerson.Gender @contactPerson.Name </h1>
                                }

                            </div>

                        </div>
                        <div class="row mt-5"></div>
                        <div class="row mt-5"></div>
                        <div class="row mt-5">
                            <div class="col-sm-4"> <h1>Company:</h1> </div> <div class="col-sm-8"> <h1> @appointment.Company </h1> </div>
                        </div>
                    }

                </div>

                <div class="col-sm-4 ">

                        <TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
                            <ItemTemplate>

                                <div class="Slideimg">
                                    <img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
                                </div>
                                <div class="Slogan">
                                    <p>Here is slogan!</p>
                                </div>
                            </ItemTemplate>
                        </TemplatedCarousel>

                </div>
                </div>
        </div>
        </div>

And here is second: @page"/second"

<div class="SecondP">
        <div class="container-fluid">
            <div class="row h-100">
                <div class="col-sm-6 ">
                    <video controls="controls" class="ml-auto" autoplay muted loop>
                        <source src="/Video/TestMovie_small.mp4" type="video/mp4" />
                    </video>
                </div>

                <div class="col-sm-6 ">
                    <TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
                        <ItemTemplate>
                            <img class="d-block center" src="@GetImageSource(@context)" alt="@context.FileName">
                        </ItemTemplate>
                    </TemplatedCarousel>
                </div>
            </div>
        </div>
    </div>

Answer 1

You can override OnInitializedAsync() or OnInitialized() in your @code {}section in new or second and inject the NavigationManager to help you.

@inject NavigationManager navigationManager // at the top
///HTML
@code
{
    protected override Task OnInitializedAsync()
    {
        //if something is empty
        navigationManager.NavigateTo("/second");
    }
}