无法在React路由器链接组件上设置HREF

Question

试图向现有React组件添加，但遇到了一些困难。给定以下代码

import { Link } from 'react-router-dom';
require('./NavBar.scss');
class NavBar extends React.Component {
authButton() {
console.log(Link)
const route = this.props.currentUser ? 'logout' : 'login';
return <Link to={ `/${route}` }>route</Link>
}

导航条组件无法呈现，我得到这个错误

Uncaught TypeError: Object(...) is not a function
at eval (react-router-dom.js:198)

如果我改变"；至"；支持类似的功能

return <Link to={ () => return `/${route}` }>route</Link>

该组件确实进行了渲染，但我得到了这个消息"；checkPropTypes.js:19警告：失败的道具类型：提供给Link的道具to无效">

任何可能导致这种情况的原因。已在其他项目的相同版本的react router dom(5.0.0(上使用此组件，没有问题。

Answer 1

尝试将其与react路由器dom中的withRoute一起使用。在文件的底部，导出默认导航栏，写下这行

export default withRoute(navbar)

不要忘记从react路由器dom导入它。

当组件未包含在App.js.等"主组件"的Route元素中时，react router dom通常会出现问题

<Route path='/' component={}

类似的东西。

我认为这是因为很多人都会遇到React路由器dom的问题。