Использование ссылки в React Router 4

Question

Я следую руководству, в котором используется более старая версия React Router. У меня все это обновлено и работает, за исключением следующего кода:

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

Я получаю сообщение об ошибке <Link to={`/books/${b.id}`}>View</Link>.

Есть несколько разных ошибок, связанных с этой одной строкой. Первая ошибка:

Предупреждение: React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс / функция (для составного компоненты), но получил: не определено. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и имен.

Проверьте метод рендеринга Book. в книге (созданный Connect (Book)) в Connect (книга) (созданный Route) в пути в div в маршрутизаторе (создан BrowserRouter) в BrowserRouter в провайдере

В чем проблема с этой линией и что я могу сделать, чтобы исправить ее?

Answer 1

Проблема была в том, что у меня было import { Link } from 'react-router' вместо import { Link } from 'react-router-dom'. После того, как я сделал изменения, все работало правильно. Спасибо karaxuna за то, что понял это.

selmansamet также правильно сказал, что нужны обратные пометки, но не являлся источником проблемы. Оригинальный код имел обратные ссылки, но я изменил их на одинарные кавычки, чтобы посмотреть, решит ли это проблему. Это не так.

Answer 2

В JSX строки должны быть в кавычках кавычках, а не в двойных или одинарных кавычках.

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