React-Router 嵌套路由无法渲染子组件配置问题求助

问题根因 #

App.jsx 中 /pageone 对应的路由规则添加了 exact 严格匹配属性，当访问 /pageone/childone 路径时，App 层级的路由无法匹配到 /pageone，Pageone 组件不会被渲染，其内部定义的子路由自然也无法生效。

调整方法 #

仅需删除 App.jsx 中 /pageone 路由的 exact 属性即可，修改后的代码如下：

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>
        {/* 移除该路由的exact属性即可 */}
        <Route path="/pageone">
          <Pageone />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

修改后路由匹配逻辑：

• 访问 /：严格匹配首页路由，渲染Home组件
• 访问 /pageone：前缀匹配到/pageone路由，渲染Pageone组件，Pageone内部的路由严格匹配/pageone，渲染PageoneContent内容
• 访问 /pageone/childone：前缀匹配到/pageone路由，渲染Pageone组件，Pageone内部的路由严格匹配/pageone/childone，渲染Childone组件

内容的提问来源于stack exchange，提问作者Mush-A