React App: у карты в HashRouter есть проблемы с итерацией компонента

Question

Я пытаюсь запустить карту, подобную этой:

const array=[
{

    componentName: 'ComponentOne'
},
{
    componentName: 'ComponentTwo'
},
]

<Switch>

  {array.map((object, index) => (
     <Route exact path='/correctPath'
     render={()=><object.componentName
     />}/>))}

</Switch>

Ошибка, которую я получаю, - неправильный регистр, ориентация свойства правильная. Ошибка также показывает, что компонент правильно размещен, хотя он и не думает, что это так. Если я изменю все экземпляры параметра «объект» на «Объект», я продолжу получать сообщение об ошибке, даже если ошибка показывает компонент в надлежащем PascalCase. Мысли? * * 1004

Answer 1

Необходимо построить правильно обернутый компонент реакции, т.е. PascalCased. Кроме того, не используйте имена переменных (в любом регистре) зарезервированных javascript ключевых слов, например Object.

. Более распространенный шаблон - хранить ссылку на компонент в массиве.

const array= [
  { component: ComponentOne },
  { component: ComponentTwo },
];

...

<Switch>
  {array.map(({ component: Component }, index) => {
    // Uses object destructuring to get and rename the component to Component
    return (
      <Route
        exact
        path="/correctPath"
        render={() => <Component />}
      />
    );
  })}
</Switch>