reactjs - 如何在React中处理多个路由器

Question

假设我们有一个网络应用程序。它通常有很多 View ，例如索引页面、管理面板、帮助页面、联系人等。我在主index.js中使用react-router-dom处理它们，它工作得很好。

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

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

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

我是 react 新手，我什至不知道如何称呼这个问题。

感谢您的建议。

Answer 1

如果我正确理解你的问题，你可以通过嵌套路由来做到这一点。假设您使用react-router 4.x.x的示例:在顶层渲染 Router 或 BrowserRouter 等组件( https://reacttraining.com/react-router/web/api/Router )一次，然后嵌套 Route 组件。在你的情况下，你的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>

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

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