Reactjs 未定义的React链接参数

参数在

ItemPage

中未定义。我看不出这里有什么问题。有人要吗

基本上是尝试使用

Link

导出默认函数App（）{
返回(
404:找不到页面}/>
)}

函数目录（）{
返回(
{Routes.map（（路由，索引）=>{
return
{route.name}
})}
);
}

const ItemPage=（{match:{params:{nm}}）=>{
返回(
项目{nm}第页
)
};

如果您使用

react router dom

软件包，那么此方法可能会帮助您：-

• ItemPage

  （使用

  useParam

  hook）：-

从'react router dom'导入{useParams}
const ItemPage=（）=>{
常量{nm}=useParams（）
返回(
项目{nm}第页
)
};

我不确定您在

ItemPage

上设置道具的方式是否完全正确-根据我使用

react router

的经验，我总是使用

match

作为自己的参数，而不定义其属性，例如：

const ItemPage = ({match}) => {
  return (
    <div>
      <h1>Item {nm} Page</h1>
      <ItemPage name={match.params.nm}/>
    </div>
  )
};

---

（参见此处：）

基本上，嵌套的

就是问题所在。应该用不同的组件或HTML替换它

---

这似乎是对的。。。你试过hook“const{nm}=useParams（）；”吗

function Catalog() {
  return (
    <div className="Catalog">
        {Routes.map((route, index) => {
            return <p key={index}><Link to={`/item/${route.name}`}> {route.name} </Link></p>
        })}
    </div>
  );
}

const ItemPage = ({match:{params:{nm}}}) => {
return (
  <div>
    <h1>Item {nm} Page</h1>
    <ItemPage name={nm}/>
  </div>
  )
  };

const ItemPage = ({match}) => {
  return (
    <div>
      <h1>Item {nm} Page</h1>
      <ItemPage name={match.params.nm}/>
    </div>
  )
};

import { RouteComponentProps } from 'react-router';

const ItemPage : FC<RouteComponentProps> = (props) => {
  const {match} = props
  return (
    <div>
      <h1>Item {nm} Page</h1>
      <ItemPage name={match.params.nm}/>
    </div>
  )
};