CODEWITHSUNDEEP
reactjsreact-routerreact-redux
kojow7
kojow7

Reputation: 11384

Using Link in React Router 4

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?

Upvotes: 1

Views: 1028

Answers (2)

kojow7
kojow7

Reputation: 11384

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.

Upvotes: 2

sametcodes
sametcodes

Reputation: 553

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

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

Upvotes: 1

Related Questions