Как реализовать динамические страницы в React.js?

Я думаю, вам нужно установить реакция-маршрутизатор-дом. Во-вторых, используйте строки шаблона.

Скорее всего, для этого вы будете использовать клиентский навигационный пакет, такой как React-маршрутизатор.

Чтобы настроить базовый маршрутизатор, вам необходимо определить маршруты и представления для этих маршрутов следующим образом, где свойство «путь» относится к желаемой конечной точке, а «компонент» — желаемое представление:

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const BasicExample = () => (
  <Router>
    <div>
     {/* Navigation menu */}
      <ul>
        <li>
          <Link to = "/">Home</Link>
        </li>
        <li>
          <Link to = "/about">About</Link>
        </li>
        <li>
          <Link to = "/topics">Topics</Link>
        </li>
      </ul>

      <hr />
      {/* Routes */}
      <Route exact path = "/" component = {Home} />
      <Route path = "/about" component = {About} />
      <Route path = "/topics" component = {Topics} />
    </div>
  </Router>
);

Эти маршруты также могут быть сгенерированы динамически с использованием массива маршрутов, таких как следующие (определенные в состоянии вашего компонента):

routes = [
  {
    path: "/",
    exact: true,
    component: Home
  },
  {
    path: "/bubblegum",
    component: () => <div>bubblegum!</div>,

  },
  {
    path: "/shoelaces",
   component: Shoelaces
  }

а затем визуализируется в React с помощью .map():

{this.state.routes.map(route => (
  <Route exact = {route.exact||false} path = {route.path} component = {route.component} />
))}