Sub-component routing in react

Question

I recently start work with react and have a doubt

What is the best way to do sub component routing? I know this kind of sub component routing like '/login/component1' , '/login/component2....' but what I want is that it will work in this manner that '/login' is not appended with /component1 In short way, path needs to be fixed with inner view routing (I am using react-router v4 for routing)

Answer 1

You can add children to your paths:

 let routes={
    path: '', component: BasicLayoutComponent,
    children: [
        {
            path: 'treatments',             
            children: [
                {
                    path: '',
                    component: TreatmentListComponent
                },
                {
                    path: 'new',
                    component: NewTreatmentComponent,
                    canActivate: [HasClinics]

                }
            ]
        }
    ]
};

So you have /treatments/ and /treatments/new as valid paths