CODEWITHSUNDEEP
javascriptreactjsreduxreact-router-v4
Jamie Aden
Jamie Aden

Reputation: 981

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

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>
    )
  }}
/>

Upvotes: 1

Views: 109

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281646

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

Upvotes: 2

Related Questions