Сейчас делаю приложение в связке реакт + тс, на основную страницу получаю список разных валют по апи которые идут блок за блоком, но хочу, чтоб при нажатии на блок мне открывалась страница с более подробной информацией об этой валюте. Понятно, что мне нужно для этого использовать роутинг, useParams, но я получаю ошибку (ниже опишу какую).
Вот мой основной App.tsx файл, здесь без ошибок:
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Coins coins={coins} />} />
<Route path="/coin" element={<Coin />}>
<Route path=":coinId" element={<Coin />} />
</Route>
</Routes>
</div>
Далее я в компоненте Coins получаю пропсы, использую мап чтоб отобразить все что приходит с сервера и делаю уже роутинг чтоб при нажатии на блок с валютой у меня открылась страница Coin:
export default function Coins(props: IPropsCoins) {
return (
<>
<div className="description-row">
{props.coins.map((coins) => {
return (
<Link to={`/coin/${coins.id}`} key={coins.id} element={<Coin />}>
<CoinItem coins={coins} />
</Link>
);
})}
</div>
</>
);
}
element={}> - подсвечивает ошибкой element и выдает такую ошибку:
(property) element: JSX.Element
Type '{ children: Element; to: string; key: string; element: Element; }' is not assignable to type 'IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement>'.
Property 'element' does not exist on type 'IntrinsicAttributes & LinkProps & RefAttributes<HTMLAnchorElement>'.ts(2322)
При удалении
element={<Coin />} ошибка исчезает, но это не решение вопроса. Как это исправить?
Простой
