Reactjs嵌套路由：嵌套子级未呈现

我试图创建一个嵌套路由的页面，但是我似乎无法使嵌套部分正常工作。我制作了这个示例，它模拟了我在页面上尝试路由的方式

我取得了一些进步，我以前在它的父元素中使用了exact，这让我更加困惑。但是，我无法理解为什么没有呈现此路线。我已经在这上面呆了一段时间了

class App extends React.Component {
  render() {
    return (
      <Router>
        <p>Main Application</p>

        <Link to="/">Root</Link>
        <Link to="/Settings">Settings</Link>

        <div>
          <Switch>
            <Route exact path="/">
              <Index />
            </Route>
            <Route path="/Settings">
              <div>
                <Settings />
              </div>
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

function Index() {
  return <h1>Index</h1>;
}

function Settings() {
  //let match = useRouteMatch();

  return (
    <div>
      <h1>Settings</h1>

      <Link to="Settings/Groups">Groups</Link>
      <Link to="Settings/Users">Users</Link>
      <Link to="Settings/Dashboards">Dashboards</Link>

      <Switch>
        <Route path={"Settings/Groups"}>
          <Groups />
        </Route>
        <Route path={"Settings/Users"}>
          <Users />
        </Route>
        <Route path={"Settings/Dashboards"}>
          <Dashboards />
        </Route>
      </Switch>
    </div>
  );
}

function Groups() {
  return <h1>Groups</h1>;
}

function Users() {
  return <h1>Users</h1>;
}

function Dashboards() {
  return <h1>Dashboards</h1>;
}

类应用程序扩展了React.Component{
render（）{
返回(
主要应用

根
设置
);
}
}
函数索引（）{
收益指数；
}
函数设置（）{
//让match=useRouteMatch（）；
返回(
设置
组
使用者
仪表盘
);
}
功能组（）{
返回组；
}
函数用户（）{
返回用户；
}
功能仪表板（）{
返回仪表盘；
}

在嵌套子组件中，在前缀中添加一个斜杠“/”。

我认为这与URL有关。我已经重写了您的代码以使用useRouterMatch（）钩子。这可能会有所帮助，但它也与react router dom嵌套示例相匹配

通读一下react router dom文档，因为它们有一个很好的嵌套示例

函数设置（）{
const{path，url}=useRouteMatch（）；
返回(
设置
组
使用者
仪表盘
);
}

奇怪的是，这是正确的答案。我说这很奇怪，因为上面的代码是我在某个Reactjs沙箱中尝试的一个示例。在我的实际项目中，它是我使用的useRouteMatch返回值的来源。这也是因为一个错误的路径。这是因为react router dom遵循一个惯例，在路径上加一个斜杠，以附加到基本url，否则它会继续附加到路径名。此外，这也是我们在机器上给出路径的方式。