IndexLink в React Router v4

новобранец здесь. Есть ли новый способ использования indexLink в React Router v4? Я обновляю некоторый код версии 3 (я думал, что ушел из-под угла, чтобы избежать всего этого устаревания!)

Я привожу это с некоторой деструктуризацией:

var {NavLink, IndexLink} = require('react-router-dom');

и используя IndexLink, чтобы он не выделялся жирным шрифтом постоянно:

<h2>Nav</h2>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>blah blah blah</IndexLink>
//Other navlinks working fine

IndexLink - это единственное, что нарушает мой код, вот ошибка с того момента, когда я изменяю его на это.

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

Все экспортируется, и простое приложение работает отлично, пока я не добавлю IndexLink. Теперь, чтобы пройти.

Ответы

Ответ 1

<Indexlink> не существует в RRv4, потому что <IndexRoute> и вся концепция индексов на самом деле не существует в RRv4. Помните, что ссылки и маршруты напрямую связаны.

Поэтому вместо этого просто используйте <NavLink>.

Прочитайте о NavLink в официальных документах:

NavLink - специальная версия, которая добавляет атрибуты стиля к отображаемому элементу, когда он соответствует текущему URL.

Если вам нужен больший контроль над соответствием URL, вы можете использовать strict или exact реквизит.

Ответ 2

Per Chris, правильный ответ заключался в том, чтобы продолжать использовать NavLink и использовать точное. Строгий не работал в этом случае.

<NavLink exact to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>chris is awesome</NavLink>

На всякий случай это наступает!