[英]Passing react-router-dom Link component as a render prop is failing
I'm trying to pass a react-router-dom
Link
component as a render prop to a component, but am running into some issues: 我正在尝试将
react-router-dom
Link
组件作为渲染道具传递给组件,但是遇到一些问题:
https://codesandbox.io/embed/xjm35923qo https://codesandbox.io/embed/xjm35923qo
The error that I receive when passing <Link>hi</Link
as a render prop is 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
作为渲染道具传递时出现的错误是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.
That seems fair enough, but if I instead pass in something like () => <Link>hi</Link>
, there is no error, but there is a warning ( 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.
) and the link doesn't render. 这似乎很公平,但是如果我改为传递
() => <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.
)并且链接不会呈现。
I'm having trouble wrapping my head around these error messages -- what am I missing here? 我无法解决这些错误消息-我在这里想念的是什么?
You should import Link as a named import: 您应该将Link导入为命名导入:
import {Link} from "react-router-dom"
and you need to wrap your app with a Router object. 并且您需要使用Router对象包装您的应用。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.