如何在反应中处理多个路由器 [英] How to handle multiple routers in react

问题描述

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

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

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

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

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

感谢您的建议.

解决方案

如果我正确理解您的问题，您可以通过嵌套路由来实现.假设您使用 react-router 4.xx 的示例:渲染路由器或 BrowserRouter 等组件 (https://reacttraining.com/react-router/web/api/Router) 一次，在顶层，然后嵌套 Route 组件.在您的情况下，您的 index.js 中有主路由器，所以可能是这样的:

<Route path="/" 精确组件={Main}/><Route path="/some-page" component={SomePage}/><Route path="/admin" component={Admin}/></BrowserRouter>

然后，在您的 Admin 组件中，您不会创建另一个路由器，而只是再次渲染路由，就像这样:

<管理菜单/><Route path="/admin/users" 组件={AdminUsers}/><Route path="/admin/groups" 组件={AdminGroups}/>

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

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

Let say we have a web application. It has usually many views, like index page, admin panel, help page, contact etc. I handle them using react-router-dom in the main index.js and it just works fine.

However now I faced problem with developing admin panel. It is one of the routes supported by the index.js router, but it contains its own menu with all actions available for admin.

How should I handle this, to only replace the content I need in the admin panel (admin actions menu stays), but not the whole content as I do from index.js router?

I tried to use the in the admin panel place for content replacement, but it either says too much recursion (If I duplicated the route for admin panel itself) or simply does not work saying nothing.

I'm react newbie and I don't even know how to call this problem.

Thanks for suggestions.

解决方案

If i understand your issue correctly, you can do that by nesting routes. Example assuming you use react-router 4.x.x: render Router or BrowserRouter etc. component (https://reacttraining.com/react-router/web/api/Router) once, at the top level, and then nest Route components. In your case you have main router in your index.js, so probably something like this:

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

then, in your Admin component you don't create another Router, instead just render Routes again, so something like this:

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

so when URL matches /admin you'll see AdminMenu and component for a specific view in admin panel. You probably want to redirect from /admin to /admin/users or some dashboard, that depends on your specific application.

Now, if you have some layout elements surrounding your main router that you want to get rid of in admin routes, it's hard to say more without seeing some code example, but i guess you could create two components, for example Layout and AdminLayout, each containing menus, header etc. and accepting children, and use them in every route depending if it's admin or regular user route.

这篇关于如何在反应中处理多个路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！