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

Question

这怎么了

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

我有错误

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义

但是如果我这样做就可以了

<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支柱与功能参数作为道具