React - 详细信息页面未显示 json 数据，但显示了 console.log

Question

我正在创建一个详细信息页面，以从地震列表中加载特定 ID 的 json 数据。 home.js 文件包含状态和路线以及地震列表，它们是指向详细信息页面的链接。 detail.js 页面应该显示点击链接的每个地震的详细信息。 我正在控制台中获取状态和数据，但未在前端显示。

我希望主页中的链接显示该特定地震 ID 的详细信息页面。

状态通过帖子从 { Home } 组件传递到 { Detail } 组件，我正在通过 require 读取 JSON。

请帮忙。我真的很感激！

Home.js

const Home = (props) => {
 const posts = require('/src/components/features.json');
 console.log(posts)

       return (
           <>
               <Container fluid={true}>
                   <Row>
                       <CardDeck className=" no-gutters ">
             {randomData.map((random) => {
               return (
                 <div key={random.metadata.api}>
                   <h2>{random.metadata.title}</h2>
                 </div>
               )
             })}
                           {posts.map((postData) => {
                               console.log(postData.id);
                               return (
                 <HashRouter>
                                   <div key={postData.id} className="container">
                   
                                           <ul className="a">
                       <li>
                       <Link to={{
                                 pathname: `/detail/${postData.id}`,
                                 state: {posts : postData}
                                 }}
                               >
                                 {postData.properties.title}</Link>
                       </li>
                                           </ul>
                   
                   <Route
                   path="/detail/:id"
                   name="earth"
                   component={Detail}
                   exact 
                   />
                   
                                           <li className="b">
                                               {postData.properties.mag}
                                           </li>
                                           <li className="c">
                                               {postData.properties.time}
                                           </li>
                                       </div>
                   </HashRouter>
                               );
                           })}
                       </CardDeck>
                   </Row>
               </Container>
           </>
       );
 }



export default Home

Detail.js

const Detail = ()=> {
    const { state } = useLocation();
    console.log(state)
    return (
      <div>
            <div>
              <strong>Id:</strong> {state.posts.id}{" "}
            </div>
            <div>
              <strong>Name:</strong> {state.posts.properties.mag}{" "}
            </div>
        <Link to="/">
          <button>Back</button>
        </Link>
      </div>
    );
  };
  

  export default Detail;