React Router调用useParams返回undefined的问题排查

AI 小北

2026-10-5

问题原因

useParams 是React Router提供的专用Hook，只能在被Route组件直接渲染的函数组件顶层作用域调用。你当前直接执行Topic()属于普通函数调用，没有挂载到路由的上下文树中，无法关联到当前匹配的路由参数，所以返回undefined。
你在Route内部直接执行函数的写法不符合React组件渲染规则，React组件需要以<Component />形式调用才会生成对应的组件实例，关联对应的上下文环境。

修复方案

方案1：将Topic作为Route直接渲染的组件（推荐）

import React from 'react';
import { Route, Switch, useRouteMatch, useParams} from 'react-router-dom';

// 把Topic组件移到Review外部，避免每次Review渲染都重复创建组件
function Topic(){
  let {topicId} = useParams<{topicId:any}>()
  console.log(topicId)
  return <>The topic is... {topicId}</>
}

function Review():JSX.Element {
  const match = useRouteMatch()
  return(
    <Switch>
      <Route path={`${match.path}/:topicId`}>
        {/* 以组件形式渲染，不要直接调用函数 */}
        <Topic />
      </Route>
    </Switch>
  )
}

export default Review;

方案2：直接在Route的渲染回调中获取参数

如果不需要单独拆分Topic组件，可以直接在Route的渲染属性中获取参数：

import React from 'react';
import { Route, Switch, useRouteMatch} from 'react-router-dom';

function Review():JSX.Element {
  const match = useRouteMatch()
  return(
    <Switch>
      <Route 
        path={`${match.path}/:topicId`}
        render={(routeProps) => {
          const topicId = routeProps.match.params.topicId
          console.log(topicId)
          return <>The topic is... {topicId}</>
        }}
      />
    </Switch>
  )
}

export default Review;