React Router Dom嵌套路径失效求助：如何正确配置路由？

问题原因 #

在react-router-dom v6中，嵌套路由的父组件必须通过<Outlet />组件来渲染子路由对应的内容。你的代码里父路由/对应的HomeScreen组件没有包含Outlet，所以访问/dashboard时，子路由的LoginScreen无法被渲染，只会显示父组件HomeScreen的内容。

解决方案 #

方案1：保持嵌套路由，在父组件中添加Outlet #

修改HomeScreen组件，导入并使用Outlet，子路由的内容会渲染在Outlet所在的位置：

// HomeScreen.js
import React from 'react';
import { Outlet } from 'react-router-dom';

export default function HomeScreen() {
  return (
    <div>
      {/* 父组件原有内容 */}
      <h2>Home Screen</h2>
      {/* 子路由组件将在此处渲染 */}
      <Outlet />
    </div>
  );
}

原有的路由配置无需修改，此时访问/dashboard时，页面会同时显示HomeScreen的内容和LoginScreen的内容（因为是嵌套关系）。

方案2：将/dashboard设为同级路由 #

如果希望访问/dashboard时只显示LoginScreen，不显示HomeScreen，可以把路由配置改为同级结构：

// App.js
const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="/" element={<HomeScreen />} />
      <Route path="dashboard" element={<LoginScreen />} />
      {/* 其他路由... */}
    </>
  )
);

这样/和/dashboard是两个独立的路由，分别对应各自的组件。

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