How do I display different web pages with differing subject on one page

Supposing I have contents stored in a database, how do I display them differently on one React Page I’m using MERN.
I provided an mock up example of what I want to do.

varying page layout for varying page subject

<body>
<article className='content' ref={content}>
  {content.map((content) => {
    const { title, image, text } = content;
    return (
      <article>
        <h3>{title}</h3>
        <img>{image}</img>
        <p >{text}</p>
        <div class="infocontainer">{info}</div>
      </article>
    );
  })}
 </article>;
</body>

someone said I should do this based on the code above via REACT ROUTER. but, its not quite what I need. I need each page to be different from any page I make. because making every subject structured exactly the same from any other is not the best approach in my opinion.