Using Link in React Router 4

Question

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?

@karaxuna That was indeed my problem. I originally had import { Link } from 'react-router' instead of import { Link } from 'react-router-dom' — kojow7
– kojow7, Commented Jul 6, 2018 at 6:04

kojow7 · Accepted Answer · 2018-07-06 06:31:19Z

2

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.

answered Jul 6, 2018 at 6:31

kojow7

11.5k21 gold badges94 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sametcodes · Accepted Answer · 2018-07-06 05:54:59Z

1

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

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

edited Jul 6, 2018 at 5:54

answered Jul 6, 2018 at 5:43

sametcodes

5536 silver badges8 bronze badges

2 Comments

kojow7 Over a year ago

Hmm, I tried changing them to backticks and am still getting the same error.

Vikas Yadav Over a year ago

Try this: <td><Link to={'/books/${b.id}'}>View</Link></td>

Collectives™ on Stack Overflow

Using Link in React Router 4

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related