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

Question

What's wrong with this?

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

I got error of

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

but if I just do this it's fine

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

Answer 1

Link component is not an export in react-router package but react-router-dom

You need to install it using

npm install -S react-router-dom

and then use it like

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

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

Also when using a functional component inline in Route make use of render and not component prop with the functional argument as props