Question

假设我们有一个Web应用程序。它通常有很多视图，比如索引页面，管理面板，帮助页面，联系人等。我在主index.js中使用react-router-dom处理它们，它运行正常。

但是现在我遇到了开发管理面板的问题。它是index.js路由器支持的路由之一，但它包含自己的菜单，所有操作都可用于admin。

我应该如何处理这个问题，只能在管理面板（管理操作菜单保留）中替换我需要的内容，而不是像index.js路由器那样替换整个内容？

我尝试在管理面板中使用内容替换内容，但它要么说太多递归（如果我复制了管理面板本身的路由），要么根本不起作用。

我是新手，我甚至不知道怎么称呼这个问题。

感谢您的建议。

Answer 1

如果我理解你的问题，你可以通过嵌套路线来做到这一点。假设您使用react-router 4.x.x的示例：在顶层渲染路由器或BrowserRouter等组件（https://reacttraining.com/react-router/web/api/Router）一次，然后嵌套路由组件。在你的情况下，你的index.js中有主路由器，所以可能是这样的：

<BrowserRouter>
   <Route path="/" exact component={Main} />
   <Route path="/some-page" component={SomePage} />
   <Route path="/admin" component={Admin} />
</BrowserRouter>

然后，在你的Admin组件中，你不创建另一个路由器，而只是再次渲染路由，所以像这样：

<div className="admin-panel-container">
  <AdminMenu />
  <Route path="/admin/users" component={AdminUsers} />
  <Route path="/admin/groups" component={AdminGroups} />
</div>

因此，当网址与/admin匹配时，您会在管理面板中看到AdminMenu和特定视图的组件。您可能希望从/ admin重定向到/ admin / users或某些仪表板，具体取决于您的特定应用程序。

现在，如果您想要在管理路由中删除主路由器周围的一些布局元素，那么在没有看到一些代码示例的情况下很难说更多，但我想您可以创建两个组件，例如布局和AdminLayout，每个包含菜单，标题等并接受子节点，并在每个路由中使用它们，具体取决于它是管理员还是常规用户路由。

如何在响应

1 个答案: