Json 点击标题后我如何重定向到全文

我用json显示了所有帖子的标题，现在我需要在点击标题后重定向到带有标题和正文的页面，有什么想法吗？谢谢你的帮助

import "./style.css";

class Card extends React.Component {
  state = {
    loading: true,
    posts: [],
  };
  async componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    const response = await fetch(url);
    const posts = await response.json();
    this.setState({ posts, loading: false });
  }
  render() {
    return (
      <div>
        {this.state.loading || !this.state.posts.length === 0 ? (
          <div> loading...</div>
        ) : (
          <div>
            {this.state.posts.map((post) => (
              <div key={post.id} className="post-header">
                {post.title}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}

export default Card;```

导入“/style.css”； 类卡扩展了React.Component{ 状态={ 加载：对， 员额：[]， }; 异步组件didmount（）{ 常量url=”https://jsonplaceholder.typicode.com/posts"; const response=等待获取（url）； const posts=wait response.json（）； this.setState（{posts，loading:false}）； } render（）{ 返回( {this.state.loading | |！this.state.posts.length==0( 加载。。。 ) : ( {this.state.posts.map（（post）=>( {post.title} ))} )} ); } } 导出默认卡```

导入“/style.css”；
类卡扩展了React.Component{
状态={
加载：对，
员额：[]，
};
异步组件didmount（）{
常量url=”https://jsonplaceholder.typicode.com/posts";
const response=等待获取（url）；
const posts=wait response.json（）；
this.setState（{posts，loading:false}）；
}
gotoPage=（数据）=>（）=>{//在渲染上方编写此函数
this.props.history.push（'/'+数据）；
}
render（）{
返回(
{this.state.loading | |！this.state.posts.length==0(
加载。。。
) : (
{this.state.posts.map（（post）=>(
{post.title}//您可以使用此函数，当用户单击标题时，将页面导航到该标题
))}
)}
);
}
}
导出默认卡```

我建议您使用功能组件，因为它会使您的代码更短，可读性更强

但根据您的代码，您只需在代码中进行以下更改即可获得所需的结果

import { useHistory } from 'react-router-dom'; 

class Card extends React.Component {
   const history = useHistory();

render() {
 return (
  <div>
    {this.state.loading || !this.state.posts.length === 0 ? (
      <div> loading...</div>
    ) : (
      <div>
        {this.state.posts.map((post) => (
          <div key={post.id} className="post-header">
            <div onClick={() => history.push(post.title)}>
             {post.title}
            </div>
          </div>
        ))}
      </div>
    )}
  </div>
  );
 }
}

从'react router dom'导入{useHistory}；
类卡扩展了React.Component{
const history=useHistory（）；
render（）{
返回(
{this.state.loading | |！this.state.posts.length==0(
加载。。。
) : (
{this.state.posts.map（（post）=>(
history.push（post.title）}>
{post.title}
))}
)}
);
}
}

非常感谢，这似乎是我问题的解决方案，但在点击标题后，我仍然得到了这个“类型错误：无法从“react router dom”读取未定义的“import{withRouter}”的属性“push”；在导出卡的末尾，使用路由器（卡）执行此导出默认操作

import { useHistory } from 'react-router-dom'; 

class Card extends React.Component {
   const history = useHistory();

render() {
 return (
  <div>
    {this.state.loading || !this.state.posts.length === 0 ? (
      <div> loading...</div>
    ) : (
      <div>
        {this.state.posts.map((post) => (
          <div key={post.id} className="post-header">
            <div onClick={() => history.push(post.title)}>
             {post.title}
            </div>
          </div>
        ))}
      </div>
    )}
  </div>
  );
 }
}