React-Router：嵌套路由不渲染组件

Question

这是问题的简化再现：具有嵌套 URL 的子级不呈现。

我的文件结构基本上是这样的：

-App
 --Home
 --Pageone
  ---Childone

我可以从App 渲染Home 或Pageone，然后我可以分别从Pageone 或Home 渲染Home 或Pageone，但我无法从其“父级”渲染Childone页面'Pageone。我不太确定做错了什么。

代码分享在下面，这个sandbox

App.jsx

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Pageone from "./Pageone";
import Home from "./Home";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/pageone">
          <Pageone />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

Home.jsx

import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <p>This is HOME!</p>
      <Link to="/pageone">Pageone</Link>
    </div>
  );
};

export default Home;

Pageone.jsx

import { Link, Route, useRouteMatch } from "react-router-dom";
import Childone from "./Childone";

const Pageone = () => {
  const { path, url } = useRouteMatch();
  return (
    <div>
      <Route exact path={path}>
        <PageoneContent url={url} />
      </Route>
      <Route exact path={path + "/childone"}>
        <Childone />
      </Route>
    </div>
  );
};

const PageoneContent = (props) => {
  return (
    <div>
      <p>This is pageone!</p>
      <Link to="/">Go back Home</Link>
      <br />
      <Link to={props.url + "/childone"}>Go to Child One</Link>
    </div>
  );
};

export default Pageone;

Childone.jsx

import { Link } from "react-router-dom";

const Childone = () => {
  return (
    <div>
      <p>This is Child one!</p>
      <Link to="/">Go back Home</Link>
    </div>
  );
};

export default Childone;

Answer 1

据我所知，您需要为路由使用另一个 Switch，否则 react 将不知道如何匹配该路由路径。

<div>
  <Route exact path={path}>

应该是：

<Switch>
  <Route exact path={path}>