如何在 Reactjs 中将博客文章的 id 传递给 readmore 子组件？

Question

我正在尝试使用 api 构建一个博客，我可以将所有博客文章呈现为列表，但我为每篇博客文章都有一个阅读更多按钮，我想构建一个显示更多关于博客文章的子组件。我知道我必须在路由器中构建一个新的 url 并传递 id 并将 id 作为 props 推送到新的子组件中，但不知何故我无法呈现有关博客文章的详细信息。我的博客列表在 blogarticel.js 中，我想在 Blogpost 中呈现详细信息.js 就是这样，我需要你的帮助。

import './App.css';
import Work from './components/Work'
import About from './components/About'

import Blog from './components/Blog'
import BlogPost from './components/BlogPost'
import Contact from './components/Contact'
import Header from './components/Header'
import Footer from './components/Footer'


import Fashion from './components/works/Fashion'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import { HashRouter } from 'react-router-dom'


function App() {
  return (
    
    <div className="App">

        <Header/>
        <Routes>
  
          <Route path="/" element={<Work />}/>
          <Route path="/About" element={<About />}/>
          <Route path="/Blog" element={<Blog />}/>
          <Route path="/Contact" element={<Contact />}/>
          <Route path="/Blog/:id" element={<BlogPost />}/>
         
          <Route path="/Fashion" element={<Fashion />}/>

        
        </Routes>   
      
        <Footer/>
      
      </div>
  );
}

export default App;

import React, {useState, useEffect} from 'react'
import axios from 'axios';
import '../styles/Container.css';
import {Link, NavLink} from "react-router-dom";

const BlogArticel = (props) => {
    const [data, setData] = useState([])
  
  useEffect(() => {
    if (Array.isArray(props.posts)) {
      
      setData(props.posts)
    }
  },[props.posts])

  const renderItems = () => {
    let apiResults = [...data]
    let bioData = []

    if (apiResults) {
      
      apiResults.forEach(ele => {
     
        if (ele && ele.caption.includes('#loeilblog')) {
          bioData.push(
            <div className="container_place">
                    <div className="text_containers">
                    <img className="container_img" key={ele.id} src={ele.media_url} alt="image"/>

                        <div className="container_text">

                        <p className="blog_username" key={ele.id}>{ele.username}    <span className="blog_date" key={ele.id}>{ele.timestamp.slice(0, 10)} </span> </p>
                 
                     

                           <p className="bio_caption" key={ele.id}>{(ele.caption.split(' ').slice(1).join(' ')).split(/\s+/).slice(0,30).join(" ").concat('...')}</p>
                           <NavLink  to="/Blog/:id" key={this.ele.id}>
                           <button className="site_button" >Read more</button>
                          </NavLink>

                        </div>   
                    </div>
                </div>
          )
        }
      });
    }

    return bioData;

  }
        return (
          <div>
            
            {renderItems()} 
          </div>
        )
    }

    export default BlogArticel;
    

import React from 'react'

function BlogPost(props) {
  return (
    <div>
      ?????
    </div>
  )
}

export default BlogPost

很多。

Answer 1

你有没有想出解决办法。我几乎或多或少地在做同样的事情，不想重新路由和获取参数，因为我在同一页面上使用模态