React Router DOM v6中useParams返回空对象问题咨询

问题场景 #

直接编写路由配置时：

<Routes>
    <Route path='/posts' element={<Posts/>}/>
    <Route path='/posts/:id' element={<PostDetails/>}/>
    <Route path='/about' element={<About/>}/>
    <Route path='/' element={<Main/>}/>
    <Route path='*' element={<NotFound/>}/>
</Routes>

PostDetails组件中调用useParams()可以正常获取到{ id: number }。但通过遍历routes数组渲染路由时：

<Routes>
    {routes.map(({path, component}) =>
        <Route path={path} element={component()}/>
    )}
</Routes>

useParams()却返回空对象。其中routes数组定义如下：

export const routes = [
    {
        path: '/',
        component: Main,
    },
    {
        path: '/about',
        component: About,
    },
    {
        path: '/posts',
        component: Posts,
    },
    {
        path: '/posts/:id',
        component: PostDetails,
    },
]

问题根源 #

直接调用component()会在<Route>组件外部提前执行组件函数，生成的React元素没有被挂载到React Router的路由上下文（RouteContext） 中。而useParams()是通过读取该上下文来获取路由参数的，因此无法拿到值。

反之，直接写<PostDetails/>时，该元素作为<Route>的element属性传递，<Route>组件会将其挂载到路由上下文内部，组件就能正常访问路由参数。

解决方案 #

方案一：修改遍历逻辑，传递JSX元素而非调用组件函数 #

<Routes>
    {routes.map(({path, component: Component}) => 
        <Route key={path} path={path} element={<Component />}/>
    )}
</Routes>

注：React要求组件名称必须以大写字母开头，因此将解构出的component重命名为Component，再以<Component/>的形式传递给element。

方案二：修改routes数组结构，直接存储React元素 #

export const routes = [
    {
        path: '/',
        element: <Main/>,
    },
    {
        path: '/about',
        element: <About/>,
    },
    {
        path: '/posts',
        element: <Posts/>,
    },
    {
        path: '/posts/:id',
        element: <PostDetails/>,
    },
]

遍历渲染时直接使用存储的元素：

<Routes>
    {routes.map(({path, element}) =>
        <Route key={path} path={path} element={element}/>
    )}
</Routes>

内容的提问来源于stack exchange，提问作者Михаил Чудаков