Передача компонента Link-router-dom Link как пропала при рендеринге

Question

Я пытаюсь передать компонент react-router-dom Link в качестве рендеринга для компонента, но сталкиваюсь с некоторыми проблемами:

https://codesandbox.io/embed/xjm35923qo

Ошибка, которую я получаю при прохождении <Link>hi</Link в качестве реквизита рендера: Invariant Violation Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Это кажется достаточно справедливым, но если я вместо этого передам что-то вроде () => <Link>hi</Link>, ошибки не будет, но есть предупреждение (react-dom.development.js?7f13:507 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.) и ссылка не будет отображаться.

У меня проблемы с тем, чтобы обернуть голову вокруг этих сообщений об ошибках - что мне здесь не хватает?

Answer 1

Вы должны импортировать ссылку как именованный импорт:

import {Link} from "react-router-dom"

и вам нужно обернуть ваше приложение объектом Router.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import