反应路由器组件道具不接受 <Link /> 组件？

Question

这有什么问题？

import { Switch, Route, Link } from 'react-router'
<Route path='/' component={() => {
    return (
      <div>
        <Link to='/'>Home</Link>
        <Link to='/users'>Users</Link>
      </div>
    )
  }}
/>

我收到

的错误

元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义

但如果我这样做就好了

<Route path='/' component={() => {
    return (
      <div>
        Home
      </div>
    )
  }}
/>

Answer 1

Link 组件不是 react-router 包中的导出，而是 react-router-dom

您需要使用

安装它

npm install -S react-router-dom

然后像

一样使用它

import { Link } from 'react-router-dom';

<Route path='/' render={(props) => {
    return (
      <div>
        <Link to='/'>Home</Link>
        <Link to='/users'>Users</Link>
      </div>
    )
  }}
/>

此外，当在 Route 中使用内联功能组件时，请使用 render 而不是 component prop，并将功能参数作为 props

反应路由器组件道具不接受 <Link /> 组件？

react router component props doesn't accept <Link /> component?

javascript

reactjs

redux

react-router-v4