Как использовать событие onClick для взаимодействия компонента Link?

Ответ 1

Вы передаете hello() в виде строки, также hello() означает выполнить hello немедленно.

попробовать

onClick={hello}

Ответ 2

Вы должны использовать это:

<Link to={this.props.myroute} onClick={hello}>Here</Link>

Или (если метод hello лежит в этом классе):

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

Ответ 3

Я не считаю, что это хорошая модель для использования в целом. Ссылка запустит ваше событие onClick, а затем перейдет к маршруту, так что будет небольшая задержка перехода на новый маршрут. Лучшей стратегией является переход на новый маршрут с помощью "to" prop, как вы это сделали, а в новой компоненте componentDidMount() вы можете запустить вашу функцию hello или любую другую функцию. Это даст вам тот же результат, но с гораздо более плавным переходом между маршрутами.

Для контекста я заметил это при обновлении моего магазина redux с событием onClick в Link, как у вас здесь, и это вызвало задержку пустого белого экрана на 0,3 секунды перед установкой нового компонента маршрута. Не было никакого вызова апи, поэтому я был удивлен, что задержка была такой большой. Однако, если вы просто консольный журнал "привет", задержка может быть не заметна.