javascript - 如何使用 MERN 堆栈显示论坛的详细信息页面？

Question

我正在使用 MERN 堆栈制作一个类似论坛网站的项目。在主页中我有不同的类别，我想在详细信息页面中查看它。我将进入详细信息页面，例如 localhost:3000/threads/id，但它不显示内容。我不知道为什么。我是 React js 的新手。如果有人有想法帮助我。我做了很多研究，但找不到。

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

import Footer from './Footer';


const Categories = () => {
    

    const [cards, setcards] = useState([])
    const getData = async () => {
        const res = await fetch("/all-cat");
        console.log(res);
        setcards(await res.json());
        //console.log(data)
        
    }
    
    useEffect(() => {
        getData();
    }, []);
    
  
    return (
        <div className="category">
            <h3>Forum Categories</h3>
            <div className="container">
                <div className="row">

                    {
                        cards.map((e) => {
                            return (

                                <div className="col-10 col-md-4 mt-4" key={e.id}>
                                    <div className="card" >
                                        <img src="https://source.unsplash.com/1600x400/?coding" className="card-img-top" alt="..." />
                                        <div className="card-body">
                                            <h5 className="card-title">{e.title}</h5>
                                            <p className="card-text">{e.desc.substring(0, 94)}</p>
                                            <Link to={"/threads/"+e._id}className="btn btn-primary">View Threads</Link>
                                        </div>
                                    </div>
                                </div>

                            )
                        })
                    }

                
                </div>
                <Footer/>
            </div>
           


        </div>



    );
}
export default Categories;
    
    // This a details page where i want the details in a next page. Its not displaying I dont know why? I am new in react please help me.. It should display the details of each categories from mongo db database below in the code I have given backend part also.
    import Footer from './Footer';
    import { useEffect,useState } from 'react';
    import Axios from 'axios'
    
    
     const Threads = ({match}) => {
        const [disp, dispCards] = useState([]);
        useEffect(() => {
            fetchDetails();
          }, []);
        const fetchDetails = () => {
            Axios.get(`/all-cat/?id=${match.params.id}`)
              .then((res) => {
                dispCards(res.disp);
                console.log(res.disp);
              })
              .catch((err) => console.log(err));
          };
        return (
            <div className="container my-4">
    
                               
                    
                  <div className="jumbotron">
                                <h1 className="display-4">Welcome to {disp?.title} Forum</h1>
                                <p className="lead">{disp?.desc}</p>
                                <hr className="my-4" />
                                <p>This is peer to peer forum for sharing knowledge with each other</p>
                                <a className="btn btn-primary btn-lg" href="/" role="button">Learn more</a>
                            </div>
    
                        
                    
                
            
    
            <Footer />
            </div>
             
    
        );
            
    }
    export default Threads;
    
    
    
    
    // This my backend part of detail page
    app.get("/threads/:id", (req, res) => {
         
         let type= req.query.type
         let id=req.query.id
        //console.log(id)
        if(type==='array'){
    
        }
         Forum.findById({'_id':{$in :id}})
            .populate('writer')
            .exec((err,detail)=>{
                if(err) return req.status(400).send(err)
                return res.status(200).send(detail)
            })
    
     })
    
    
    If anyone as idea please suggest me. I am new in react js after lot of researching i could not find the solution. 

标签： javascriptnode.jsreactjsmongodbexpress