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

带有响应路由器的嵌套侧边栏

0 个答案: