Реагировать на перенаправление по щелчку элемента SVG

Question

У меня есть одностраничное приложение React, которое d3 и SVG тяжелое, и я хотел бы иметь возможность перенаправлять с одной страницы на другую, когда пользователь нажимает svg rect на одной из моих страниц. Я знаком с this.props.history.push(), а также с компонентом <Link> из библиотекиact-router-dom, однако ни один из них, похоже, не поможет в этом случае.

Элемент релевантности svg здесь глубоко в моем графическом компоненте, который находится на 3-4 дочерних элемента от основного App.js файла внешнего интерфейса, который выполняет всю маршрутизацию, и когда я запускаю console.log(this.props) в моем компонента с svg, на подпорках нет объекта history. Я не уверен, нужен ли здесь воспроизводимый пример, так как мне просто нужно направление.

Короче говоря, я понятия не имею, что должно входить в функцию нажатия, связанную с моим svg rect, чтобы включить перенаправление в моем приложении. Любые мысли по этому поводу будет принята с благодарностью!

Редактировать: очевидно, что это неправильно, но я попытался вернуть Redirect компонент в обработчике по нажатию, и он не работал:

    ...
    ...
    function handleMouseClick() {
        console.log('clicked')
        return <Redirect to='/stats' />;
    } 

    myRect.on('click', handleMouseClick)
    ...

Edit2: Должен ли я поместить элементы rect внутри компонентов в SVG? это вообще возможно?

Answer 1

Вы можете добавить history опору из react-router к компоненту, поместив его в withRouter. Просто убедитесь, что все, что монтирует ваш компонент, использует упакованную версию (обычно экспортируя только упакованный компонент).

import React from 'react';
import { withRouter } from 'react-router';

class MyComponent extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.history.push('/newpage')}>
        Click me
      </button>
    );       
  }
}

export default withRouter(MyComponent);