Блог

Я создаю проект, подобный веб-сайту форума, используя стек MERN. В приложении у меня есть разные категории, и я хочу просмотреть их на странице сведений. Я перехожу на страницу сведений, такую как localhost:3000/темы/идентификатор, но на ней не отображается содержимое. Я не знаю, почему. Я новичок в 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.