Using Link in React Router 4

1
votes

I am following a tutorial that uses the older version of React Router. I have it all updated and working except for the following bit of code:

{this.props.books.map((b, i) => <tr key={i}>
    <td>{b.title}</td>
    <td><Link to={`/books/${b.id}`}>View</Link></td>
</tr>)}

I am getting an error on the <Link to={`/books/${b.id}`}>View</Link>.

There are a few different errors related to that one line. The first error is:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Book. in Book (created by Connect(Book)) in Connect(Book) (created by Route) in Route in div in Router (created by BrowserRouter) in BrowserRouter in Provider

What is the problem with this line and what can I do to fix it?

2
reactjsreact-routerreact-redux
Check link import statement from react-dom. – karaxuna
@karaxuna That was indeed my problem. I originally had import { Link } from 'react-router' instead of import { Link } from 'react-router-dom' – kojow7

2 Answers

2
votes

The problem was because I had import { Link } from 'react-router' instead of import { Link } from 'react-router-dom'. Once I made the change everything worked properly. Thanks to karaxuna for figuring that out.

selmansamet was also correct that backticks were needed, but was not really the source of the problem. The original code did have backticks, but I changed them to single quotes to see if that would fix the problem. It did not.

1
votes

In JSX, strings must be in backtick quotes, not double or single quotes.

<td><Link to={`/books/${b.id}`}>View</Link></td>