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.
