Error: Cannot match any routes. URL Segment: 'submit'

Question

I'm trying to navigate from one component to another, but nothing is working for me. I've tried routerLink as well, but it didn't work too.

Below is my explore.components.ts file:

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.css']
})

export class ExploreComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onClick() {
    this.router.navigate(['/submit']);
  }
}

This is my explore.html file. A click on the button is supposed to display the "submit" component.

<button type="button" class="btn" (click) = "onClick()">Click here to submit your work <i class="fa fa-hand-peace-o fa-lg"></i></button>

Both the components are children of the app component.

Answer 1

try it now:

const ROUTES: Routes = [ {path:'', component: HomeComponent},
{path:'sign-up', component: SignUpComponent},
{path:'login', component: LoginComponent},
{path:'contact',component:ContactComponent}, 
{path:'submit',component: SubmitComponent}, 
{path:'explore', component:ExploreComponent} ] 

you didn't have a route that navigates to the submit component you have, now you can navigate to it from any other component.