Реагировать на перенаправление при нажатии элемента svg
У меня есть одностраничное приложение React с тяжелыми d3 и SVG, и я хотел бы иметь возможность перенаправлять с одной страницы на другую, когда пользователь нажимает svg rect на одной из моих страниц. Я знаком с this.props.history.push(), а также с компонентом <Link> из библиотеки react-router-dom, однако ни один из них не помогает в данном случае.
Релевантный элемент svg здесь находится глубоко в моем графическом компоненте, который находится на 3-4 ребенка ниже основного App.js файла внешнего интерфейса, который выполняет всю маршрутизацию, и когда я запускаю console.info(this.props) в моем компоненте с svg, есть нет history объекта на реквизите. Я не уверен, что здесь нужен воспроизводимый пример, так как мне просто нужно направление.
Короче говоря, я понятия не имею, что должно входить в функцию щелчка, связанную с моим прямоугольником svg, чтобы включить перенаправление в моем приложении. Любые мысли по этому поводу будут очень признательны!
Редактировать:, очевидно, это неправильно, но я попытался вернуть компонент Redirect в обработчике щелчка, и это не сработало:
...
...
function handleMouseClick() {
console.info('clicked')
return <Redirect to='/stats' />;
}
myRect.on('click', handleMouseClick)
...
Редактировать2: должен ли я помещать элементы rect внутри компонентов в svg? это вообще возможно?
Ответы 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);