title: Setting child routes in react
body: <p>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.</p>
  <p>Profile.js</p>
  <pre class="lang-js prettyprint-override"><code>render();
  {
    const profile = {
      padding: '30px',
    };
    return (
      &lt;div
        className=&quot;col-md-12 col-sm-12  profile-container bg-gray&quot;
        style={profile}&gt;
        &lt;h3 className=&quot;roboto paragraph color-black mgb-60&quot;&gt;Profile&lt;/h3&gt;
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot; component={ProfileForm} /&gt;
            &lt;Route path=&quot;/profile-form&quot; component={ProfileForm} /&gt;
            &lt;Route path=&quot;/profile-roles&quot; component={ProfileRoles} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Profile Roles</p>
  <pre class="lang-js prettyprint-override"><code>render();
  {
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={RoleLists} /&gt;
          &lt;Route path=&quot;/list&quot; component={RoleLists} /&gt;
          &lt;Route path=&quot;/create&quot; component={CreateRole} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>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.</p>