Как исправить ошибку при роутинге?

Question

[Bart Simpson]

Сейчас делаю приложение в связке реакт + тс, на основную страницу получаю список разных валют по апи которые идут блок за блоком, но хочу, чтоб при нажатии на блок мне открывалась страница с более подробной информацией об этой валюте. Понятно, что мне нужно для этого использовать роутинг, 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 />} ошибка исчезает, но это не решение вопроса. Как это исправить?

Answer 1

[Александр]

<Routes>
    <Route path="/" element={<Coins coins={coins} />} />
    <Route path="/coin">
        <Route index element={<Coin />} />
        <Route path=":coinId" element={<Coin />} />
    </Route>
</Routes>

Comments

[Bart Simpson]

Ошибка не ушла, у меня в роутинге App.tsx нет ошибок

[Александр]

Bart Simpson, роутинг делаете таким, а из Link удаляете лишние элементы.

[Bart Simpson]

Александр, разобрался, спасибо!