Ошибка использования карты для динамического создания маршрутов

Question

Я получаю сообщение об ошибке, когда пытаюсь использовать Route динамически из массива.

Внимание: используется неверный регистр. Используйте PascalCase для компонентов React или строчные буквы для HTML элементов.

Вот элементы, которые я использую:

const steps = [
  {
    name: 'Step Name',
    description: 'Step description (can be empty)',
    link: '/',
    component: 'Welcome'
  },
  {
    name: 'Step Name 2',
    description: 'Step Description',
    link: '/step-2',
    component: 'Step2'
  }
];

<Switch>
  {steps.map((step, index) => {
    return <Route exact path={step.link} key={index} component={step.component} />;
  })}
</Switch>

Я пробовал использовать шаблон литералы, но я получил другую ошибку:

Перегрузка 1 из 2, '(props: Readonly): Route', выдал следующую ошибку. Тип 'string' нельзя назначить типу 'ComponentClass | FunctionComponent | ComponentClass, любой> | FunctionComponent <...> | undefined '.

Answer 1

как сказал @Brian, вы используете строки, а не компоненты при отображении. Импортируйте компонент и используйте его вместо строки. Обратите внимание на отсутствие кавычек в значениях поля компонента.

import Welcome from '/path/to/welcome';
import Step2 from '/path/to/step2';
const steps = [
  {
    name: 'Step Name',
    description: 'Step description (can be empty)',
    link: '/',
    component: Welcome
  },
  {
    name: 'Step Name 2',
    description: 'Step Description',
    link: '/step-2',
    component: Step2
  }
];