About blog posts mechanism

Question

The problem is that when we are creating a post in blogger or medium.com or somewhere else similar to those will show a brief details of a post in a main page and once we click on 'read more' button or on post will navigate to new url where the all details are included in the post (the whole content of a post will display in new url). As a junior developer l, I want to know how it's happening??

Better if you can answer me using React.js + node.js + mongodb technologies.

Any answers will be appreciated.

First picture: is the blog post which is displayed in main page of blog.

Second picture: is showing that same blog post with whole content and in new url / new page.

Answer 1

There is really a million ways you can go about doing this, and I think a more complete answer would need more complete details as to "how do you want to accomplish this".

Something you will want to look into is "path variables".

In Express, routes using path variables will look something like this:

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
});

And in React, you would want to use React Router and make a Route and some component like so:

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

ArticlePage:

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
}

You'd also want to worry about "pagination" or "infinite scrolling" to load the articles for display (before the user selects one). Another problem that has a LOT of different solutions, but I would recommend looking for a npm package for that sort of thing.