Reactjs 如何从当前组件重定向到另一个组件，并在React中传递重定向组件的道具

我有一个便条应用程序。因此，该应用程序基本上可以添加、编辑和删除注释

用于编辑注释。我必须点击注释的编辑按钮。 它应该触发一个重定向到UpdateNote组件的函数 此外，还应将注释ID传递给更新组件

我的帖子部分：

import React, { Component } from "react";
import axios from "axios";
import Post from "../../components/Post/Post";

class Posts extends Component {
  state = {
    posts: [],
    error: false
  };

  fetchNotes = () => {
    axios
      .get("http://localhost:3001/notes")
      .then(response => {
        //console.log(response.data);
        const posts = response.data;
        this.setState({ posts: posts });
      })
      .catch(error => {
        this.setState({ error: true });
      });
  };

  componentDidMount() {
    this.fetchNotes();
  }

  render() {
    let posts = <p style={{ textAlign: "center" }}>Something went wrong!</p>;

    if (this.state.posts.length === 0) {
      posts = <p>Oops no post to show...</p>;
    } else if (!this.state.error) {
      posts = this.state.posts.map(post => {
        //console.log(post._id);
        return (
          <Post
            key={post._id}
            title={post.title}
            text={post.text}
            id={post._id}
            fetchNotes={this.fetchNotes}
            edit={} // <-- HERE
          />
        );
      });
    }

    return <div>{posts}</div>;
  }
}

export default Posts;

import React，{Component}来自“React”；
从“axios”导入axios；
从“../../components/Post/Post”导入Post；
类Posts扩展组件{
状态={
员额：[]，
错误：false
};
fetchNotes=（）=>{
axios
.get（“http://localhost:3001/notes")
。然后（响应=>{
//console.log（response.data）；
const posts=response.data；
this.setState（{posts:posts}）；
})
.catch（错误=>{
this.setState（{error:true}）；
});
};
componentDidMount（）{
this.fetchNotes（）；
}
render（）{
让posts=
出问题了！
；
if（this.state.posts.length==0）{
posts=哦，没有要显示的post…
；
}else if（！this.state.error）{
posts=this.state.posts.map（post=>{
//控制台日志（post.\U id）；
返回(
您可能希望导航到一个新路由，在该路由中呈现UpdateNote组件，并且该路由应将post.\u id作为url参数。这样，UpdateNote组件将能够从其路由道具获取post id

因此，如果您使用的是React Router DOM，post组件上的edit prop将是以下函数：

() => history.push(`${yourUpdateNoteRoute}${post._id}`)