React-router-dom. Как вывести нужный элемент по маршруту

Question

В v6 react-router-dom вместо

<Route path='/' component={App} />

От нас ожидают это

<Route path='/' element={<App />} />

Вопрос: я с помощью функции map пытаюсь вытащить маршруты из массива:

[{exact: true, component: App, path='/'}]

Но не понимаю как в v6 правильно передать компонент.

Код ниже не работает т.к. component в v6 заменен на element, но я не могу тут указать тот самый <App /> мне нужно просто передать App

routes.map(route=>{
  return <Route 
    exact={route.exact}
    path={route.path}
    component={route.component}
      />
})

Пробовал так же render и children тоже не работают. Полагаю нужно указать что то типа React.element(App) но я не знаю точно как

Answer 1

Нашел ответ. Создаём переменную в каждой итерации и передаем как компонент в треугольных скобках

routes.map(route=>{
let Component = route.component
  return <Route 
    exact={route.exact}
    path={route.path}
    element={<Component />}
      />
})

БЛОГ НА HUSL

React-router-dom. Как вывести нужный элемент по маршруту

Ответы (1 шт):