Route multiple components with the same base url in Angular

Question

I am pretty new to Angular and I am creating an app that has nested information in pages (like in a file explorer) the app works fine when using the buttons to navigate, but I want the users to be able to go directly to the information they are looking for by pasting a link in their browser. For that, I need to redirect the users using 'www. mysite.com/explorer/page1' and 'www. mysite.com/explorer/page1/document1' to the same component who will take the URL and make the requests needed to the server. I was unable to find how to do that. I would really appreciate it if you could explain it to me.

Thank you in advance!

Answer 1

Ok, I found an answer after reading a lot about routing in Angular and taking a break to rethink my point of view.

To achive that you can create a child of the base url you want to redirect from, and then assing your component to the '**' path in teh child routing which means all your urls will go to the same component, and to solve the probelm of showing different information we can take the URL and then render the componen according to the information there.

const routes: Routes = [
    {path: 'explorer/', component: ExplorerComponent, children: [
        {path: '**', component: ExplorerComponent}
      ]
    }
];