Question

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

我取得了一些进步，我之前在它的父元素中使用了精确，这让我更加困惑。但是我不明白为什么这条路线没有被渲染。我已经被这个问题困住了一段时间。

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>;
}

Answer 1

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

Answer 2

我会说这与您的网址有关。我已经重写了您的代码以更多地使用 useRouterMatch() 钩子，因为这可能会有所帮助，它也与 react-router-dom 嵌套示例相匹配。

阅读 react-router-dom 文档，因为它们有一个很好的嵌套 https://reactrouter.com/web/example/nesting 示例


function Settings() {
  const { path, url } = useRouteMatch();
  return (
    <div>
      <h1>Settings</h1>

      <Link to={`${url}/Groups`}>Groups</Link>
      <Link to={`${url}/Users`}>Users</Link>
      <Link to={`${url}/Dashboards`}>Dashboards</Link>

      <Switch>
        <Route path={`${path}/Groups`}>
          <Groups />
        </Route>
        <Route path={`${path}/Users`}>
          <Users />
        </Route>
        <Route path={`${path}/Dashboards`}>
          <Dashboards />
        </Route>
      </Switch>
    </div>
  );
}

Reactjs 嵌套路由：嵌套子节点不渲染

2 个答案: