React-router-dom, route component not render

Question

i want to create a tab using react-router-dom . so in my parent route, i set my route to the profile page.

<Router history={history}>
     <div>
       <Route path="/profile" exact component={ProfilePageComponent}/>
    </div>
</Router>

then, in my ProfilePageComponent , i set the child route

<div className="profile-page-container">
   <div className="height-controler">
      <SidebarProfileComponent/>
      <Switch>
          <Route path={`/profile/change-password`} component={ChangePasswordComponent}/>
      </Switch>
   </div>        
</div>

when i go to the /profile path, the SidebarProfileComponent is showing but the ChangePasswordComponent isnt showing.

Answer 1

Since you have an exact attribute defined on the parent route, when you visit /profile/change-password , the parent Route itself doesn't match and hence there is no question of the child route matching.

If you remove the exact prop from the parent route, /profile matches /profile/change-password and hence ProfileComponent gets rendered and then the child Route is matched

Remove the exact prop from parent

<Router history={history}>
     <div>
       <Route path="/profile" component={ProfilePageComponent}/>
    </div>
</Router>

PS Always remember if you have nested Routes, you must not use exact attribute, instead use Switch component for multiple Routes