React Router v6 访问带URL Slug的/user/:name路径无法加载子组件问题

问题原因 #

• 你当前使用的是react-router-dom v6版本，部分API和v5不兼容，存在两处写法错误：
  1. 父路由<Route path="user" element={<User />} exact>上的exact属性在v6中已经废弃，且带嵌套子路由的父路由不需要完全匹配，保留该属性会导致子路由无法正确触发匹配。
  2. v6已经移除了Route组件的render属性，所有路由组件统一通过element属性传递，路由参数不再通过match props传入，需要在组件内用useParams钩子获取。

修复代码 #

1. 修改路由配置 #

<>
  <MainNavBar navigation={navigation} />
  <Routes>
    <Route index element={<Home />} />
    {/* 移除exact属性 */}
    <Route path="user" element={<User />}>
      {/* 替换render为element，直接传递UserPage组件 */}
      <Route path=":name" element={<UserPage />} />
    </Route>
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</>

2. 调整UserPage组件获取参数 #

import { useParams } from 'react-router-dom'

const UserPage = () => {
  // 调用useParams获取路由中的name参数
  const { name } = useParams()
  // 原调试逻辑可以直接放在组件内
  console.log(name)
  console.log("test2")

  return <div userName={name}>
    {/* 原有UserPage的渲染逻辑 */}
  </div>
}

你原来的User组件写法是正确的，预留了<Outlet />插槽用于渲染子路由组件，修改完成后访问/user/test即可正常加载UserPage内容。

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