反应路由器 useParams 返回未定义答案

【问题标题】：React Router useParams returns undefined反应路由器 useParams 返回未定义
【发布时间】：2021-09-09 03:08:47
【问题描述】：

我正在尝试打印从 URL 中提取的 topicId。但是每当我尝试这样做时，它都会以未定义的形式返回。我在这段代码中做错了什么？

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

function Review():JSX.Element {
  const match = useRouteMatch()

  function Topic(){
    let {topicId} = useParams<{topicId:any}>()
    console.log(topicId)
    return <>The topic is... {topicId}</>
  }
  return(
    <Switch>
      <Route path={`${match.path}/:topicId`}>
        {Topic()}
      </Route>
    </Switch>
  )
}

export default Review;

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您需要在Route 中添加Topic 作为组件而不是function：

 <Route path={`${match.path}/:topicId`}>
        <Topic/> // <--- Change here
  </Route>

请查看此文档：https://reactrouter.com/web/api/Hooks/useparams

【讨论】：