diff --git a/app/soapbox/components/permalink.js b/app/soapbox/components/permalink.js
deleted file mode 100644
index b94ef1648..000000000
--- a/app/soapbox/components/permalink.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router-dom';
-
-export default @withRouter
-class Permalink extends React.PureComponent {
-
- static propTypes = {
- className: PropTypes.string,
- href: PropTypes.string.isRequired,
- to: PropTypes.string.isRequired,
- children: PropTypes.node,
- onInterceptClick: PropTypes.func,
- history: PropTypes.object,
- title: PropTypes.string,
- dangerouslySetInnerHTML: PropTypes.object,
- };
-
- handleClick = e => {
- if (this.props.onInterceptClick && this.props.onInterceptClick()) {
- e.preventDefault();
- return;
- }
-
- if (this.props.history && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
- e.preventDefault();
- this.props.history.push(this.props.to);
- }
- }
-
- render() {
- const { href, children, className, title, dangerouslySetInnerHTML } = this.props;
-
- return (
-
- {children}
-
- );
- }
-
-}
diff --git a/app/soapbox/components/permalink.tsx b/app/soapbox/components/permalink.tsx
new file mode 100644
index 000000000..db68811e5
--- /dev/null
+++ b/app/soapbox/components/permalink.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+interface IPermaLink extends Pick, 'dangerouslySetInnerHTML'> {
+ className?: string,
+ href: string,
+ title?: string,
+ to: string,
+}
+
+const Permalink: React.FC = (props) => {
+ const history = useHistory();
+
+ const { className, href, title, to, children, ...filteredProps } = props;
+
+ const handleClick = (event: React.MouseEvent) => {
+ if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
+ event.preventDefault();
+ history.push(to);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Permalink;