Setting child routes in react

Issue

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.

Solution

something like that.

Profile Roles

render()
    { 
        const { match: { path } } = this.props;
        return(
            <Router>
                <Switch>
                    <Route exact path={path} component={RoleLists} />
                    <Route path={`${path}/list`} component={RoleLists} />
                    <Route path={`${path}/create`} component={CreateRole} />
                </Switch>
            </Router>
        )
    }

Answered By - Kirill Skomarovskiy