React-router-dom 直接嵌套到子组件

Question

我是 react.js 的新手，现在我使用 antd 和 react-router-dom 来启动我的页面。

这里遇到了一个与react-router-dom相关的问题，路由器的结构如下图所示：

-Home 
-Member 
----MemberIquire 
----MemberExamine 
-Charge
----Investor
-------InvestorIncome
-------InvestorExpense

映射路径是：

-(path: / )
-(path: /memebers )
----(path: /memebers/memberinquire ) 
----(path: /memebers/memberinquire ) 
-(path: /charge )
----(path: /charge/investor ) 
-------(path: /charge/investor/investorIncome ) 
-------(path: /charge/investor/investorExpense ) 

这是我的代码：

/// main.jsx


<Router>
        <Layout className={styles["homepage-main"]}>
          <SideMenu />
          <Layout>
            <HeaderComponent />
            <Content className={styles["homepage-content"]}>
              <Route path="/dashboard" component={DashBoard}></Route>
              <Route
                path="/members/memberInquire"
                component={MembersInquire}
              ></Route>
              <Route
                path="/members/memberExamine"
                component={MembersExamine}
              ></Route>
            </Content>
          </Layout>
        </Layout>
</Router>

/// sideMenu.jsx
{menus.map((menu) => {
          if (!menu.subMenu) {
            // only first level
            return (
              <Item key={menu.key}>
                <Link to={`${menu.path}`}> {menu.name} </Link>
              </Item>
            );
          } else {
            // if it has second level
            return (
              <SubMenu key={menu.key} title={menu.name}>
                {menu.subMenu.map((s) => {
                  // only second level
                  if (!s.sunMenu) {
                    return (
                      <Item key={s.key}>
                        <Link to={`${menu.path}${s.path}`}> {s.name} </Link>
                      </Item>
                    );
                  }
                  // if it has third level
                  else {
                    return (
                      <SubMenu key={s.key} title={s.name}>
                        {s.sunMenu.map((ss) => {
                          return (
                            <Item key={ss.key}>
                              <Link to={`${menu.path}/${s.path}/${ss.path}`}>
                                {ss.name}
                              </Link>
                            </Item>
                          );
                        })}
                      </SubMenu>
                    );
                  }
                })}
              </SubMenu>
            );
          }
        })}

我参考了 react-router-dom 官方的嵌套示例，在 Topic 函数组件中使用了let { path, url } = useRouteMatch();。

但就我而言，Members 只是打开其子组件 (MemberIquire/MemberExamine) 的下拉菜单，这意味着没有 Members 的组件，如果按照我的代码操作，它将始终添加 members当我点击 MemberIquire 或 MemberExamine 的链接时进入 URL，所以它会变成http://localhost:3002/#/members/members/members/members/memberExamine

点击时我的愿望是http://localhost:3002/#/members/memberExamine 或http://localhost:3002/#/members/memberIquire。

请有人帮助我实现这个目标。 如果对这个话题有任何混淆，请告诉我，我会解释它。

Answer 1

我已经找到了这个案例的解决方案，把答案留给希望将来遇到同样问题的人。

问题描述：

1. 我有一个路由器 json 文件来存储每个路由信息，如下所示：

// route.js

const menus = [
  {
    key: "dashboard",
    name: "DashBoard",
    path: "/dashboard",
    // component: DashBoard
  },
  {
    key: "members",
    name: "MemberManage",
    path: "members",
    subMenu: [
      {
        key: "memberInquire",
        name: "MemberInquir",
        path: "memberInquire",
        // component: MemberInquire
      },
      {
        key: "memberExamine",
        name: "MemberExamine",
        path: "memberExamine",
        // component: MemberExamine
      },
    ],
  },
]

如您所见，这是一个嵌套的路由结构。 我想实现的是在点击事件上切换 url。

click dashboard => url :www.example.com/dashboard
click memberInquire => url: :www.example.com/members/memberInquire

1. 所以我使用 react-router-dom 的Link 来访问这个标签。

<Link to={`${menu.path}/${s.path}`}>{s.name}</Link>

但是，当我点击 memberInquire 和 memberExamine 之间的菜单按钮时，url 开始失去控制。

My expectation: www.example.com/members/memberInquire
In fact: www.example.com/members/members/members/members/memberInquire

解决方案：

原因是由于链接行为。 实际上，Link 只是一个<a> 标签，它具有push 方式。 那么如果我使用如下链接呢：

<Link to={`${menu.path}/${s.path}`}>{s.name}</Link>

这样它只会告诉浏览器在每次点击时推送members/memberInquire。

在开头加上/变成这样：

           v
<Link to={`/${menu.path}/${s.path}`}>{s.name}</Link>

这将解决这个问题:)