假设我们有一个 Web 应用程序。它通常有很多视图，如索引页面、管理面板、帮助页面、联系人等。我在主 index.js 中使用 react-router-dom 处理它们，它工作正常。
但是现在我在开发管理面板时遇到了问题。它是 index.js 路由器支持的路由之一，但它包含自己的菜单，其中包含可供管理员使用的所有操作。
我应该如何处理这个问题，只替换管理面板中我需要的内容（管理操作菜单保留），而不是像 index.js 路由器那样替换全部内容？
我尝试使用管理面板中的位置进行内容替换，但它要么表示递归过多（如果我复制了管理面板本身的路由），要么根本不工作。
我是新手，我什至不知道如何称呼这个问题。
感谢您的建议。
【问题讨论】：
标签： reactjs
如果我正确理解您的问题，您可以通过嵌套路由来做到这一点。假设您使用 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 和特定视图的组件。您可能希望从 /admin 重定向到 /admin/users 或某个仪表板，这取决于您的特定应用程序。
现在，如果您的主路由器周围有一些布局元素，您想在管理路由中删除，那么如果没有看到一些代码示例就很难说更多，但我想您可以创建两个组件，例如，布局和 AdminLayout，每个都包含菜单、标题等并接受子级，并在每个路由中使用它们，具体取决于它是管理员路由还是常规用户路由。
【讨论】：