react router component props doesn't accept component?

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

score 2 · Accepted Answer · answered Apr 07 '18 at 05:16

2

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

answered Apr 07 '18 at 05:16

Shubham Khatri

211,155
45
305
318

ah no wonder, but any clue why the is not clickable here? https://codesandbox.io/s/jz245lr48v – Jamie Aden Apr 07 '18 at 05:23
and to save npm package you just need `npm i` right? – Jamie Aden Apr 07 '18 at 05:55
Check this, https://stackoverflow.com/questions/43994510/react-router-v4-renders-multiple-routes/43994605#43994605 you need to write `
Content for Home
} /> ` – Shubham Khatri Apr 07 '18 at 06:07

react router component props doesn't accept component?

1 Answers1