React-router-dom v6嵌套路由仅渲染顶层路由，子路由不生效求助

你的问题核心是父组件Users没有添加Outlet组件，这是v6实现嵌套路由的必要条件——子路由的组件需要通过父组件里的Outlet来挂载渲染。

问题原因 #

在v6中，嵌套路由的父路由组件必须使用Outlet来指定子路由内容的展示位置。你当前的代码只定义了路由结构，但Users组件里没有预留子组件的渲染位置，所以访问/users/invite时，只会渲染父组件Users，子组件Invite没有地方显示。

解决步骤 #

1. 在Users组件中导入Outlet
2. 在Users的JSX中添加<Outlet />，放置在你希望子路由组件渲染的位置

修改后的Users组件示例：

import { Outlet } from 'react-router-dom';

function Users() {
  return (
    <div>
      {/* 父组件原有内容 */}
      <h2>Users 页面</h2>
      {/* 子路由组件将在这里渲染 */}
      <Outlet />
    </div>
  );
}

export default Users;

你的路由结构本身是正确的，不需要修改。添加Outlet后，访问/users时只会显示Users组件的内容；访问/users/invite时，Users组件会正常渲染，同时Invite组件会挂载在Outlet的位置。

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