將react-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. 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

您應該將Link導入為命名導入：

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

並且您需要使用Router對象包裝您的應用。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import