Reactjs Can'；t使react路由器使用带参数的多层路由

我正在努力使我的路由器工作。到目前为止，我只有简单的路线，如： /登录，/logout，/admin。在我的/admin路径下面有几个路径，比如/admin/users、/admin/groups

现在，我想这样做，以便能够在如下路径上渲染组件：/admin/groups/modify/：groupID。由于/admin/groups工作得很好，我想我可以只写/admin/groups/modify/：groupID，但它不是那样工作的

那么为什么/admin/groups有效，而/admin/groups/modify/：groupID无效呢？是因为我有参数吗

我的路由器如下所示：

---

您不应该在路线组件中放置那么多精确的道具，React route始终进行部分匹配和先到先得服务，这意味着如果您先声明路径

/

，然后

/admin

它将首先呈现第一个路径组件（即使您想要第二个路径组件，它也不会呈现该路径组件），这就是为什么你应该在你的路线组件中放置精确的道具，你需要完全匹配，这就是你应该如何进行的

export default function App() {
  return (
    <>
      <Router>
        <Nav />
        <Switch className="container-fluid">
          <Route exact path="/admin" component={AdminDashboard} />
          <Route path="/admin/regTokens" component={AdminRegTokens} />
          <Route path="/admin/users" component={AdminUsers} />
          <Route exact path="/admin/groups" component={AdminGroups} />
          <Route
            path="/admin/groups/modify/:groupID"
            component={AdminGroupsModify}
          />
        </Switch>
      </Router>
    </>
  );
}

导出默认函数App（）{
返回(
);
}

另一种方法是把路径较大的路线放在第一位，也就是说把这条路线放在第一位

<Route path="/admin/groups/modify/:groupID"
       component={AdminGroupsModify}
              />

<Route exact path="/admin/groups" component={AdminGroups} />

在这条路线之前

<Route path="/admin/groups/modify/:groupID"
       component={AdminGroupsModify}
              />

<Route exact path="/admin/groups" component={AdminGroups} />

为了更好地理解反应路线