简体   繁体   中英

React functional component not rendering but used to

My functional component doesn't get rendered, first I was trying to access it with react-router, but currently I'm passing it right instead of App component to index.js render function. Other components get rendered. It'll be amazing if you could at least share your experience with, what might be a reason?

This component is where the problem is, it doesn't get rendered:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> export default function MZsPopular() { return ( <> <Header><HeaderImg src="../../assets/headerpic.png"/><Navbar><span>mypage</span>| <span>log out</span></Navbar></Header> <Content><SideBar/><RightFrame><Title>The story of Generation MZ<Subtitle>Popular</Subtitle></Title> <Tables> <Table> <thead> <tr> <th>Group</th> <th>Title</th> </tr> </thead> <tbody> <tr><td><div></div></td><td>MZs general forum All time likes post 1</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>MZs general forum All time likes post 2</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>MZs general forum All time likes post 3</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>MZs general forum All time likes post 4</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>MZs general forum All time likes post 5</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> </tbody> </Table> <RightTable> <thead><tr><th>Title</th></tr></thead> <tbody><tr><td>ID</td><td>MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post. MZs Recent 3 days likes post.</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> </tbody></RightTable> </Tables> </RightFrame></Content> </> ) }

This components gets rendered:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> export default function PoliticsWe() { return ( <> <Header><HeaderImg src="../../assets/headerpic.png"/><Navbar><span>mypage</span>| <span>log out</span></Navbar></Header> <Content><SideBar/><RightFrame><Title>Politics<Subtitle>We Forum</Subtitle></Title> <Tables> <Table> <thead> <tr> <th>Group</th> <th>Title</th> </tr> </thead> <tbody> <tr><td><div></div></td><td>Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post. Politics Our Forum 1 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>Politics Our Forum 2 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>Politics Our Forum 3 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>Politics Our Forum 4 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td><div></div></td><td>Politics Our Forum 5 All time likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> </tbody> </Table> <RightTable> <thead><tr><th>Title</th></tr></thead> <tbody><tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> <tr><td>ID</td><td>MZs Recent 3 days likes post</td><td><div><span><img src="../../assets/likes.png" alt=""/>3526</span><span><img src="../../assets/comments.png" alt=""/>3526</span></div></td></tr> </tbody></RightTable> </Tables> </RightFrame></Content> </> ) }

I've found out that I just commented the part of component by coincidence and that's why it wasn't rendering

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM