Javascript 如何通过链接传递其状态在一个组件中设置的对象的属性，并在React中的另一个组件中渲染它们

我有两个部分和一条路线。我希望传递place对象的属性，以便在其他组件中渲染它们。我有一个组件，它在状态中设置了位置。在该组件中，我为每个地方绘制了链接。当我点击链接时，我希望能够访问一个包含该地点信息的页面。由于某些原因，我根本无法访问该对象。有什么想法吗

import React, { useState, useEffect } from "react";
import axios from "axios";
import PlaceVisited from "./PlaceVisited";
import {
  Link,
  BrowserRouter as Router,
  Route,
  Redirect
} from "react-router-dom";

const UserPersonal = () => {
  const [user, setUser] = useState([1]);
  const [place, setPlace] = useState([
    { id: 6, placeVisited: "Kuaa Lumpur", country: "Malaysia", user_id: 1 },
    { id: 7, placeVisited: "Bangkok", country: "Thailand", user_id: 1 }
  ]);
  return (
    <div>
      {place.map(place => (
        <Places key={place.id} place={place} />
      ))}
    </div>
  );
};
const Places = ({ place }) => {
  return (
    <div>
      City:
      <Link
        to={{
          pathname: `/places/${place.id}`,
          data: { place }
        }}
      >
        {place.placeVisited}
      </Link>
    </div>
  );
};
export default UserPersonal;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“/placevisted”导入已访问的地点；
进口{
链接
BrowserRouter作为路由器，
路线,，
重新使用
}从“反应路由器dom”；
const UserPersonal=（）=>{
const[user，setUser]=useState（[1]）；
const[place，setPlace]=useState([
{id:6，访问地点：“吉隆坡”，国家：“马来西亚”，用户id:1}，
{id:7，访问地点：“曼谷”，国家：“泰国”，用户_id:1}
]);
返回(
{place.map（place=>(
))}
);
};
常量位置=（{place}）=>{
返回(
城市：
{place.placeVisited}
);
};
导出默认用户个人；

成分2

import React, {useState, useEffect} from "react";
const PlaceVisited = (props) => {
  `const [places, setPlaces] = useState('')`
  useEffect(()=>{
    setPlaces(props.place.placeVisited)
  },[])
}

return (
  <div>
    <p>placevisited</p>
    <h2>{places}</h2>
  </div>
);

export default PlaceVisited

import React，{useState，useffect}来自“React”；
const placevisted=（道具）=>{
`const[places，setPlaces]=useState（“”）`
useffect（（）=>{
场景（道具、场景、场景）
},[])
}
返回(
参观的地方

{places}
);
导出默认位置

路由器

<Router>
  <Route path="/places/:id"   component={PlaceVisited}   />
</Router>

---

有两种方法可以选择如何使用React路由器将数据传递到组件

传递id，然后使用props.match.params.id在第二个组件中获取该id的数据

你经过这个州。由于在本例中没有使用任何API:s或backed，因此建议使用这种方法

请参阅这篇博客文章，了解如何实现这一点：