Как отрисовать Route в React + TypeScript с помощью map?

Question

[AndreyVolkov72]

Такая проблема, хочу отрисовать на основе routesArray в index.ts файле, роуты в компоненте AppRouter.tsx.
Но как понимаю ts не понимает, что страницы которые я импортирую это функциональные компоненты. Но когда меняю расширение index с ts на tsx, ошибка пропадает, но роуты не рендерятся.
При этом пробовал в routesArray component: убирать символы < />, но рендеринг всё равно не происходит, т.к. в router dom v6+ element должен быть с "кавычками < />". При этом так же менял у index расширение с ts на tsx и в любом случае не рендериться.

Примичание, index.ts файл, это не главный index файл, при помощи которого работает приложение

Index.ts

import React from "react";
import { About } from "../pages/About";
import { Portfolio } from "../pages/Portfolio";
import { Skills } from "../pages/Skills";

interface IRoutes {
    path: string;
    component: React.ComponentType | any;
}

export enum RoutesNames {
    ABOUT = '/',
    PORTFOLIO = '/portfolio',
    SKILLS = '/skills',
}

export const routesArray:IRoutes[] = [
    {path: RoutesNames.ABOUT, component: <About/>},
    {path: RoutesNames.PORTFOLIO, component: <Portfolio/>},
    {path: RoutesNames.SKILLS, component: <Skills/>},
]

AppRouter.tsx

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { routesArray } from '../routes'

export const AppRouter = () => {
  return (
    <Routes>
        {routesArray.map(item=><Route key={item.path} element={item.component} />)}
    </Routes>
  )
}

App.tsx файл, куда импортируется AppRouter

import React from 'react';
import { AppRouter } from './components/AppRouter';

function App() {
  return (
    <div className="App">
      <p>title</p>
      <AppRouter/>
    </div>
  );
}

export default App;

Answer 1

[AndreyVolkov72]

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

Comments

[Александр]

https://reactrouter.com/docs/en/v6/hooks/use-routes