React NavLink多级路径无法在Outlet中打开问题求助

我的App.js路由配置如下：

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/selectedItem/:id" element={<PortfolioItem />} />
          <Route path="/" element={<Nav />}>
            <Route path="/Home" element={<Home />} />
            <Route path="About" element={<About />} /> 
            <Route path="PortfolioList" element={<PortfolioList />} />
            <Route path="Contact" element={<Contact />} > 
            </Route>
            <Route path="/" element={<Home />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

该路由会加载Nav.js中的<Nav/>组件，该组件包含菜单、NavLink路径以及Outlet。但不在Nav.js同一目录下的页面的NavLink无法在Outlet中打开，除非指向与Nav.js同级的页面。请问是否无需重写App.js和Nav.js就能解决此问题，或者问题根源不在这两处？

问题根源出在NavLink的路径写法和路由嵌套匹配逻辑上，不需要重写App.js和Nav.js的核心结构，只需做以下调整：

• 统一路由路径写法：App.js中根路由下的嵌套路由，把/Home改成不带斜杠的Home，保持和其他子路由写法一致：

  <Route path="Home" element={<Home />} />
  

• 修正Nav组件中NavLink的to属性：
  • 指向同级嵌套页面时，直接用相对路径，比如to="Home"、to="About"；
  • 指向子目录下的页面时，确保路径和路由配置匹配，比如如果页面是PortfolioList的子页面，路由配置要挂载在PortfolioList路由下，NavLink用to="PortfolioList/xxx"或者绝对路径/PortfolioList/xxx；
• 调整独立路由到嵌套层级：如果PortfolioItem需要在Outlet中打开，把它从独立路由改成根路由的子路由：

  <Route path="/" element={<Nav />}>
    // ...其他子路由
    <Route path="selectedItem/:id" element={<PortfolioItem />} />
  </Route>
  

  之后NavLink写to="selectedItem/123"就能在Outlet中加载该页面。

核心逻辑是：只有挂载在包含Outlet的父路由下的子路由，才能通过NavLink在Outlet中打开，同时要保证NavLink的路径和路由配置的路径完全匹配。

内容的提问来源于stack exchange，提问作者windsy