带有 react-router 的嵌套侧边栏

Question

我正在尝试在我的配置文件设置组件中创建嵌套路由我阅读了 react-router 文档，但那里的解决方案没有涵盖我的情况。我有一个包含所有路由和受保护路由的 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>
          </>

和嵌套的导航栏组件：

<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 配置文件设置页面的内容（附加图片）

感谢帮助者！

运球配置文件设置图片链接： https://i.stack.imgur.com/LcGga.png