Почему реагирующая маршрутизация не работает для динамически добавляемых маршрутов, использующих реагирующий маршрутизатор-дом?

Question

Я столкнулся со странным поведением с React-Router-Dom. Позвольте мне сначала объяснить проблему, а затем странное поведение.

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

Я храню эти добавленные страницы в базе данных в следующем формате.

path="/addeddynamicpage"
name="Added Dynamic Page"
component="Dynamic"

Существует переменная типа array для хранения этих маршрутов и последующего предоставления их компоненту View и Router.

Я импортировал все страницы компонента, на который загружаются динамические маршруты. После получения этих маршрутов я перебираю переменную маршрутов и передаю фактический компонент.

например:

если я передал компонент = "Динамический" из серверной части, это строка, а не импортированный класс / функция. Поэтому я сопоставлю эту строку и верну динамический класс / функцию, которые я уже импортировал.

Теперь странное поведение: если я статически помещаю эту структуру в переменную маршрутов, я могу переходить на разные страницы.

Но я извлекаю их из серверной части и устанавливаю в соответствии с требованием в объекте маршрутов, он не работает.

Если я добавлю два / три маршрута в маршруты статическими, а затем добавлю только что извлеченные динамические маршруты из серверной части, все будет работать нормально.

Если количество страниц увеличивается, оно не работает.

Если я ставлю страницы администратора статически, это работает. Если я перемещу их в базу данных и получу их оттуда, это не работает.

ниже код, выбор маршрутов и установка класса / функции:

_getComponent = (str) => {
    switch (str) {
      case "Dashboard":
        return Dashboard;
      case "Dynamic":
        return Dynamic;
      case "Calendar":
        return Calendar;
      case "Navigation":
        return Navigation;
      case "JqueryFormUpload":
        return JqueryFormUpload;
      default:
        return null;
    }
  }

  fetchData = () => {
    fetch("http://localhost:53982/api/Admin/GetRouteLinks")
      .then(res => { return res.json() })
      .then(json => {
        let data = JSON.parse(json.Data);

        data.forEach((value, index) => {
          let obj = value;

          //component
          if (value.component !== null) {
            obj.component = this._getComponent(value.component);
          }

          dashboardRoutes.push(obj);

        }); 
      })
  }

ниже - код коммутатора, где инициализируются маршруты:

<Switch>
  {dashboardRoutes.map((prop, key) => {
    {prop.component}
    if (prop.redirect)
      return <Redirect from={prop.path} to={prop.pathTo} key={key} />;
    if (prop.collapse)
      return prop.views.map((prop, key) => {
        return (
          <Route path={prop.path} component={prop.component} key={key} />
        );
      });
    return <Route path={prop.path} component={prop.component} key={key} />;
  })}           
</Switch>

1. Как я могу убедиться, что каждый маршрут, который я получаю из бэк-энда, будет работать?

2. Есть ли проблемы с кодом или подходом?