конвертировать существующие ссылки для реакции маршрутизатора?

Question

При использовании реагирующего маршрутизатора вы должны использовать компонент Ссылка для ссылок.Я хочу преобразовать существующий веб-сайт в веб-приложениеactjs ... HTML-файл генерируется с сервера и содержит традиционные ссылки ... Есть ли способ преобразовать эти ссылки в компонент ссылки маршрутизатора реагирования?

Answer 1

Вы не можете буквально перевести их, поскольку они находятся за пределами области действия React.

Вы можете использовать другой подход, вам понадобятся две разные задачи:

1. изменениеродное (не сгенерированное React) поведение ссылки путем вставки пользовательских обработчиков событий
2. инициирует изменение маршрута с помощью кода.

Это можно сделать из React с использованием некоторого Vanilla JS, что-то вроде

class MyComponent extentds React.Component {
    componentDidMount() {
      document.querySelectorAll('a.your_external_links').forEach((a) => {
        a.addEventListener('click', (ev) => {
          ev.preventDefault();
          this.props.history.push("/new/url")
        });
      })
    }
}

Обратите внимание на вызов querySelectorAll: вам нужно найти способ выбрать все ваши родные ссылки;Вы можете выполнить эту операцию за несколько шагов (несколько вызовов querySelector, querySelectorAll, getElementById).

Последнее важное замечание: cleanup !

Вы должныудалить новых слушателей событий в componentWillUnmount.