title: How to stay at the same page after page reload in Angular
body: <p>Few days ago I have started learning Angular and tried to do a simple SPA. I have added 2 components and routing for them:</p>
  <pre><code>const appRoutes: Routes = [
    {path: 'main', component: MainPageComponent}, //default page
    {path: 'registration-form', component: RegistrationPageComponent}, //&quot;another&quot; page
    {path: 'login-form', component: LoginPageComponent},
    {path: '**', component: PageNotFoundComponent}
  ];
  </code></pre>
  <p>So I have default routing to main page and the button on it, which navigates to another page (component):</p>
  <pre><code>&lt;button style=&quot;border-color: transparent;&quot;  type=&quot;button&quot;
          class=&quot;item7 btn btn-secondary btn-pill&quot; [routerLink]=&quot;['/registration-form']&quot;&gt;
     &lt;i class=&quot;fa fa-sign-in mr-2&quot;&gt;&lt;/i&gt;
     {{logButtonTitle}}
  &lt;/button&gt;
  </code></pre>
  <p>When I click on this button, it successfully navigates me to another page (component), but if I press F5 on the other page (browser page reload) my application forgets my second page and loads the default one.
  So, I don't know how to stay on another page after page reloading and if can I do it at all.</p>
  <p>P.s. - I tried to find any information about it, but all solutions that I found didn't help me.</p>
  <p>Thanks!</p>
  <p>Update:
  The code in app.components.ts</p>
  <p>Here I load default page always when application starts:</p>
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {Router} from '@angular/router';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit{
    constructor(
      private router: Router
    ) {}
  
    ngOnInit(): void {
      this.router.navigate(['/main']);
    }
  }
  </code></pre>