Установка дочерних маршрутов в реакции

Question

У меня есть компонент профиля, который далее делится на профиль-форму и профиль-роли. Я уже сделал маршруты этих подкомпонентов, но они не работали. Вот примеры кодов этого компонента.

Профиль. 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>
  );
}

Роли профиля

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

Сейчас я могу видеть только 'h3 тег начального профиля. js. Ни один из маршрутизации (профиль и роли), кажется, не работает. Пожалуйста, помогите.

Answer 1

После определения пути из реквизита в компоненте «Роли профиля» не объявляйте Router и просто добавляйте Routes. В противном случае вы можете столкнуться с проблемами перенаправления.

Answer 2

Я скучаю по маленькой концепции. после многих поисков в Google и прочтения множества учебников я обнаружил, что мне не нужно повторно объявлять Router в моем профиле. Маршрутизация работает хорошо, если я использую только Маршрут внутри коммутатора.

Вот мой код.

Профиль. 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>

        )
    }

Роли профиля

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>
        )
    }

Answer 3

что-то в этом роде.

Роли в профиле

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>
        )
    }