如何处理多个路由器的反应

Question

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

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

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

我试图在管理面板中使用内容替换内容,但它要么说过多的递归(如果我复制了管理面板本身的路由),或者根本就没有说什么.

我反应新手,我甚至不知道怎么称呼这个问题.

谢谢你的建议.

Answer 1

如果我正确理解您的问题,您可以通过嵌套路线来实现.假设您使用react-router 4.xx的示例:在顶层创建一次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或某些仪表板,具体取决于您的特定应用程序.

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

Answer 2

对我来说，react-router-dom 6.2.1 的作用如下：

1. 对于主页路由器，在index.js（或App.js）中，需要在 admin/ 后面添加一个*字符：

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

2. 对于它的导航栏：

    <div className="links">
        <Link to="/">Main</Link>
        <Link to="/some-page">Some Page</Link>
        <Link to="/admin">Admin Page</Link>
    </div>
   

3. 对于管理页面路由器，路径的 admin/ 部分不能重复：

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

4. 但在管理导航栏中，路径必须包含 admin/ 部分：

    <div className="admin-links">
        <Link to="/admin/users">Explore Users</Link>
        <Link to="/admin/groups">Explore Groups</Link>
    </div>