Как динамически генерировать маршруты Rect JS из API

У меня есть реагирующие JS-маршруты со статическими данными json. Я хотел бы знать, как динамически генерировать данные этих маршрутов из API. Пожалуйста, проверьте мои данные маршрутов ниже и посоветуйте, как это сделать.

    import React from 'react';

const Dashboard = React.lazy(() => import('./views/Dashboard'));
const Colors = React.lazy(() => import('./views/Theme/Colors'));
const Typography = React.lazy(() => import('./views/Theme/Typography'));
const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
const Users = React.lazy(() => import('./views/Users/Users'));
const User = React.lazy(() => import('./views/Users/User'));
const login = React.lazy(() => import('./views/Pages/Login'));

// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [

  { path: '/', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/theme', exact: true, name: 'Theme', component: Colors },
  { path: '/theme/colors', name: 'Colors', component: Colors },
  { path: '/theme/typography', name: 'Typography', component: Typography },
  { path: '/widgets', name: 'Widgets', component: Widgets },
  { path: '/users/:id', exact: true, name: 'User Details', component: User },
];

export default routes;