Setting child routes in react

Question

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.

Answer 1

After defining path from the props in your "Profile Roles" component make sure not to re declare Router and just add Routes.Otherwise you may face redirect issues.

Answer 2

I miss a small concept. after searching a lot on google and reading lots of tutorials I found that I didn't need to re-declare Router in my profile component. Routing works well if I use only Route inside of Switch.

Here is my code.

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>
                <Switch>
                    <Route path="/dashboard/profile" exact component={ProfileForm} />
                    <Route path="/dashboard/profile/view" component={ProfileForm} />
                    <Route path="/dashboard/profile/roles" component={ProfileRoles} />
                </Switch>

            </div>

        )
    }

Profile Roles

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