Вложенная боковая панель с реагирующим маршрутизатором - PullRequest
Новая
       63

Вложенная боковая панель с реагирующим маршрутизатором

0 голосов
/ 02 мая 2020

Я пытаюсь создать вложенные маршруты в своем компоненте настройки профиля. Я прочитал документацию о реагирующих маршрутизаторах, и решение там не охватывает мою ситуацию. У меня есть компонент App со всеми маршрутами и защищенными маршрутами: 

<Router>
    <NavBar />
    <Switch>
      <Route exact path='/' component={Home} />
      <ProtectedRoute exact path='/editUser' component={EditUser} />
      <Route component={NotFound} />
    </Switch>
  </Router>

Затем внутри компонента EditUser у меня есть другой компонент Switch: 

            <>
           <SettingSidebar />
            <Switch>
              <Route path={path} component={UserSettings} />
               <Route
                exact
                path='/socialSettings'
                render={() => (
                  <SocialSettings updatePost={updatePost} error={errors} />
                )}
              />
              </Route>
              <Route
                exact
                path='/hero'
                render={() => (
                  <HeroSettings updatePost={updatePost} error={errors} />
                )}
              />
            </Switch>
          </>

и вложенные компоненты navbar: 

<ul className='edit__list'>
    <li className='edit__item'>
      <Link to={`${url}`} className='edit__link'>
        User
      </Link>
    </li>
    <li className='edit__item'>
      <Link to={`${url}/socialSettings`} className='edit__link'>
        Post
      </Link>
    </li>
    <li className='edit__item'>
      <Link to={`${url}/hero`} className='edit__link'>
        Hero section
      </Link>
    </li>
  </ul>

Я пытаюсь создать нечто подобное на страницу настроек профиля Dribbble (прикрепленное изображение)

Спасибо за помощь!

Ссылка на изображение настроек профиля Dribbble: https://i.stack.imgur.com/LcGga.png

...