diff --git a/.eslintrc.js b/.eslintrc.js
index 3bac9ed69..70506f60c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -236,7 +236,7 @@ module.exports = {
},
// Common React utilities
{
- pattern: '{classnames,react-helmet,react-router-dom}',
+ pattern: '{classnames,react-helmet,react-router,react-router-dom}',
group: 'external',
position: 'before',
},
diff --git a/app/javascript/mastodon/components/column_back_button.jsx b/app/javascript/mastodon/components/column_back_button.jsx
index 74a03b093..b47718ed8 100644
--- a/app/javascript/mastodon/components/column_back_button.jsx
+++ b/app/javascript/mastodon/components/column_back_button.jsx
@@ -4,29 +4,28 @@ import { createPortal } from 'react-dom';
import { FormattedMessage } from 'react-intl';
+import { withRouter } from 'react-router-dom';
+
import { Icon } from 'mastodon/components/icon';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
-export default class ColumnBackButton extends PureComponent {
-
- static contextTypes = {
- router: PropTypes.object,
- };
+class ColumnBackButton extends PureComponent {
static propTypes = {
multiColumn: PropTypes.bool,
onClick: PropTypes.func,
+ ...WithRouterPropTypes,
};
handleClick = () => {
- const { router } = this.context;
- const { onClick } = this.props;
+ const { onClick, history } = this.props;
if (onClick) {
onClick();
- } else if (router.history.location?.state?.fromMastodon) {
- router.history.goBack();
+ } else if (history.location?.state?.fromMastodon) {
+ history.goBack();
} else {
- router.history.push('/');
+ history.push('/');
}
};
@@ -60,3 +59,5 @@ export default class ColumnBackButton extends PureComponent {
}
}
+
+export default withRouter(ColumnBackButton);
diff --git a/app/javascript/mastodon/components/column_header.jsx b/app/javascript/mastodon/components/column_header.jsx
index 9d29bbae0..2896a501b 100644
--- a/app/javascript/mastodon/components/column_header.jsx
+++ b/app/javascript/mastodon/components/column_header.jsx
@@ -5,8 +5,10 @@ import { createPortal } from 'react-dom';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
import { Icon } from 'mastodon/components/icon';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
const messages = defineMessages({
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
@@ -18,7 +20,6 @@ const messages = defineMessages({
class ColumnHeader extends PureComponent {
static contextTypes = {
- router: PropTypes.object,
identity: PropTypes.object,
};
@@ -38,6 +39,7 @@ class ColumnHeader extends PureComponent {
onClick: PropTypes.func,
appendContent: PropTypes.node,
collapseIssues: PropTypes.bool,
+ ...WithRouterPropTypes,
};
state = {
@@ -63,12 +65,12 @@ class ColumnHeader extends PureComponent {
};
handleBackClick = () => {
- const { router } = this.context;
+ const { history } = this.props;
- if (router.history.location?.state?.fromMastodon) {
- router.history.goBack();
+ if (history.location?.state?.fromMastodon) {
+ history.goBack();
} else {
- router.history.push('/');
+ history.push('/');
}
};
@@ -78,15 +80,14 @@ class ColumnHeader extends PureComponent {
handlePin = () => {
if (!this.props.pinned) {
- this.context.router.history.replace('/');
+ this.props.history.replace('/');
}
this.props.onPin();
};
render () {
- const { router } = this.context;
- const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
+ const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
const { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', {
@@ -129,7 +130,7 @@ class ColumnHeader extends PureComponent {
pinButton = ;
}
- if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
+ if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
backButton = (