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

Question

我有两个组件和一条路线。 我想传递 place 对象的属性，以便我可以在其他组件中呈现它们。 我有一个组件，它的位置设置为 state。 在那个组件中，我为每个单独的地方绘制了链接。 当我单击链接时，我希望能够访问包含有关该地点信息的单个页面。 出于某种原因，我根本无法访问该对象。 有任何想法吗 ？

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;

组件 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

路由器

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

Answer 1

如何使用 React Router 将数据传递给组件有两种选择。

1. 您传递 id，然后使用 props.match.params.id 在第二个组件中获取该 id 的数据
2. 你通过州。 由于您没有使用任何 API:s 或在示例中支持，这是推荐的方法。

请参阅有关如何解决此问题的博客文章： https : //tylermcginnis.com/react-router-pass-props-to-link/