Setting child routes in react

I have a profile component that further gets divided into profile-form and profile-roles. I already made routes of these subcomponents but they didn't work. Here are the sample codes of this component.

Profile.js

render();{  const profile = {    padding: '30px',  };  return (<div      className="col-md-12 col-sm-12  profile-container bg-gray"      style={profile}><h3 className="roboto paragraph color-black mgb-60">Profile</h3><Router><Switch><Route exact path="/" component={ProfileForm} /><Route path="/profile-form" component={ProfileForm} /><Route path="/profile-roles" component={ProfileRoles} /></Switch></Router></div>  );}

Profile Roles

render();{  return (<Router><Switch><Route exact path="/" component={RoleLists} /><Route path="/list" component={RoleLists} /><Route path="/create" component={CreateRole} /></Switch></Router>  );}

Right now I only able to see the 'h3' tag of starting profile.js. None of the routing(profile and roles) seems to be working. Please help.