我如何通過鏈接傳遞其狀態在一個組件中設置的對象的屬性，並在 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/