React Router Dom V6页面导航失效：URL变更但页面不渲染

核心原因 #

你遇到的问题是React Router v6的嵌套路由必须通过<Outlet />组件渲染子路由内容，而你的父组件ListOfThings中没有添加这个组件——这就导致地址栏URL更新后，子路由的页面组件没有渲染的容器，所以看不到页面变化。

修复代码 #

只需要给ListOfThings组件添加<Outlet />即可：

1. 先导入Outlet：

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

2. 在组件的返回内容中加入<Outlet />，子路由组件会自动渲染到这个位置：

function ListOfThings() {
  const navigate = useNavigate();

  // ... 原有事件处理函数

  return (
    <>
      <h2>ListOfThings</h2>
      <button onClick={handleClickCreate}>Go To Create New Thing Page</button>
      <button onClick={handleClickShow}>Go To Show Thing Page</button>
      {/* 子路由组件会渲染在这里 */}
      <Outlet />
    </>
  );
}

另外补充一个细节：你定义的ShowThing路由是/:id（动态参数路由），但handleClickShow里调用的是navigate('ShowThing')，这会跳转到/ListOfThings/ShowThing，无法匹配到:id路由。如果要测试展示页，应该传具体的ID参数，比如navigate('123')。

调试建议 #

• 检查嵌套路由结构：v6彻底抛弃了v5的children路由写法，所有嵌套路由的父组件必须显式渲染<Outlet />，这是最常见的迁移坑。
• 用React DevTools排查：查看组件树，确认子路由组件是否被挂载。如果没挂载，要么是路由匹配失败，要么是缺少<Outlet />。
• 打印路由匹配状态：在父组件中用useMatch钩子查看当前路由匹配情况，确认子路由是否被正确识别：

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

// 在ListOfThings组件内
const match = useMatch('/ListOfThings/*');
console.log('当前路由匹配信息:', match);

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