Node.js 关于博客帖子机制

Node.js 关于博客帖子机制,node.js,reactjs,mongodb,blogs,posts,Node.js,Reactjs,Mongodb,Blogs,Posts,问题是,当我们在blogger或medium.com或其他类似网站上创建帖子时,会在主页上显示帖子的简要细节,一旦我们点击“阅读更多”按钮或在帖子上,就会导航到新的url,所有细节都包含在帖子中(帖子的全部内容将显示在新的url中)。 作为一名初级开发人员,我想知道它是如何发生的 如果你能用React.js+node.js+mongodb技术回答我,那就更好了 如有任何答复,将不胜感激 第一张图片:显示在博客主页上的博客文章 第二张图片:在新的url/新的页面上显示同一篇博文的全部内容。确实

问题是,当我们在blogger或medium.com或其他类似网站上创建帖子时,会在主页上显示帖子的简要细节,一旦我们点击“阅读更多”按钮或在帖子上,就会导航到新的url,所有细节都包含在帖子中(帖子的全部内容将显示在新的url中)。 作为一名初级开发人员,我想知道它是如何发生的

如果你能用
React.js+node.js+mongodb
技术回答我,那就更好了

如有任何答复,将不胜感激

第一张图片:显示在博客主页上的博客文章


第二张图片:在新的url/新的页面上显示同一篇博文的全部内容。

确实有很多方法可以做到这一点,我认为更完整的答案需要更完整的细节,比如“你想如何实现这一点”

您需要研究的是“路径变量”

在Express中,使用路径变量的路由如下所示:

app.get('/articles/:article_id', (request, result) => {
  const {article_id} = request.params;
  //... Make database query using path variable
});

//Using two path variables
app.get('/articles/:article_id/:some_other', (request, result) => {
  const {article_id, some_other} = request.params;
  //... Make database query using path variables
});
在React中,您需要使用React路由器创建一条路由和一些组件,如下所示:

//... surrounding parent component
<Route path='articles/:article_id'>
  <ArticlePage />
</Route>
//... surrounding parent component

您还需要担心“分页”或“无限滚动”来加载要显示的文章(在用户选择之前)。另一个问题有很多不同的解决方案,但我建议为这类事情寻找npm包。

看看关于如何使用ReactJS显示或隐藏元素的一些想法。谢谢,你的答案对我来说非常清楚。
import React from 'react';
import { useParams } from 'react-router-dom';

function ArticlePage() {
  const params = useParams();
  //... Make API call with params.article_id

  //... Render component with data from API call
}