deps: Update react-router

app/components/App/Navbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link, withRouter } from 'react-router'
+import { Link, withRouter } from 'react-router-dom'
 import styled, { withTheme, css } from 'styled-components'
 import { Flex, Box } from '@rebass/grid'
 import { themeGet } from 'styled-system'

app/components/App/Sidebar.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import { NavLink } from 'react-router-dom'
 import { Query } from '@apollo/client/react/components'
 import { withNamespaces } from 'react-i18next'
 import classNames from 'classnames'
@@ -69,7 +69,7 @@ export default class Sidebar extends React.PureComponent {
   MenuLink({ title, iconName, customLink, className, children, ...props }) {
     const classes = classNames(className, { 'link-with-icon': !!iconName })
     return (
-      <Link
+      <NavLink
         className={classes}
         activeClassName="is-active"
         onClick={this.closeSideBarIfMobile}
@@ -78,7 +78,7 @@ export default class Sidebar extends React.PureComponent {
       >
         {iconName && <RawIcon name={iconName} />}
         {customLink ? children : <span>{children}</span>}
-      </Link>
+      </NavLink>
     )
   }
 
@@ -214,7 +214,7 @@ export default class Sidebar extends React.PureComponent {
     const t = this.props.t
     return (
       <ul className="menu-list">
-        <this.MenuListLink to="/videos" iconName="television" onlyActiveOnIndex>
+        <this.MenuListLink to="/videos" iconName="television" strict>
           {capitalize(t('entities.videoFactChecking'))}
         </this.MenuListLink>
         <ReputationGuard requiredRep={MIN_REPUTATION_MODERATION}>

app/components/Comments/CommentForm.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { withNamespaces } from 'react-i18next'
 import isURL from 'validator/lib/isURL'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import { get } from 'lodash'
 import { Formik } from 'formik'
 import styled from 'styled-components'

app/components/Help/Help.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { withNamespaces, Trans } from 'react-i18next'
 
-import { Link, withRouter } from 'react-router'
+import { Link, withRouter } from 'react-router-dom'
 import { Icon } from '../Utils/Icon'
 import HelpPageContent from './HelpPageContent'
 import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
@@ -11,21 +11,20 @@ import Message from '../Utils/Message'
 @withRouter
 export default class Help extends React.PureComponent {
   render() {
-    const {
-      t,
-      routeParams: { splat },
-    } = this.props
+    const { t, location } = this.props
+    const cleanPathName = location.pathname.replace(/\/+$/, '') // Remove trailing slashes
+    const subPage = cleanPathName.replace(/^\/help\/?/, '') || null
 
     let header = ''
     let content = ''
-
-    if (!splat) {
+    if (!subPage) {
       header = <h1 className="title is-1">{t('title')}</h1>
       content = this.renderIndexContent()
     } else {
-      header = this.renderPageHeader()
-      content = <HelpPageContent page={this.props.routeParams.splat} />
+      header = this.renderPageHeader(subPage)
+      content = <HelpPageContent page={subPage} />
     }
+
     return (
       <div className="help-page">
         <section className="hero is-primary is-bold">
@@ -79,24 +78,21 @@ export default class Help extends React.PureComponent {
     )
   }
 
-  renderPageMenuEntry(splat) {
-    const label = this.props.t(`pages.${splat}`, { defaultValue: splat })
-    return <div className="panel-block">{this.renderPageLink(splat, label)}</div>
+  renderPageMenuEntry(subPage) {
+    const label = this.props.t(`pages.${subPage}`, { defaultValue: subPage })
+    return <div className="panel-block">{this.renderPageLink(subPage, label)}</div>
   }
 
-  renderPageLink(splat, label) {
-    return <Link to={`/help/${splat}`}>{label || splat}</Link>
+  renderPageLink(subPage, label) {
+    return <Link to={`/help/${subPage}`}>{label || subPage}</Link>
   }
 
-  renderPageHeader() {
-    const {
-      t,
-      routeParams: { splat },
-    } = this.props
+  renderPageHeader(subPage) {
+    const { t } = this.props
     return (
       <div>
         <h1 className="title is-1">
-          {t('title')}: {t(`help:pages.${splat}`, { defaultValue: 'I am lost 😟' })}
+          {t('title')}: {t(`help:pages.${subPage}`, { defaultValue: 'I am lost 😟' })}
         </h1>
         <Link className="subtitle" to="/help">
           <Icon name="arrow-left" />

app/components/Help/HelpPageContent.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import Markdown from 'react-markdown'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 import { isExternal, isDownloadableFile } from '../../lib/url_utils'
 import { LoadingFrame } from '../Utils/LoadingFrame'

app/components/Home/AllTeam.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { Flex, Box } from '@rebass/grid'
 import { withNamespaces } from 'react-i18next'

app/components/Home/Home.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import { withNamespaces, Trans } from 'react-i18next'
 import { ExternalLinkAlt } from 'styled-icons/fa-solid'
 

app/components/LoggedInUser/LogoutPage.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 import { withNamespaces } from 'react-i18next'
 
 import { withLoggedInUser } from './UserProvider'
@@ -28,7 +28,7 @@ export default class LogoutPage extends React.Component {
       await this.props.logout()
     }
 
-    this.props.router.replace('/')
+    this.props.history.replace('/')
   }
 
   render() {

app/components/LoggedInUser/Notifications.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import gql from 'graphql-tag'
 import { Query, Mutation } from '@apollo/client/react/components'
 import { get } from 'lodash'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
 
 export const loggedInUserNotificationsQuery = gql`
   query LoggedInUserNotifications($page: Int! = 1, $pageSize: Int! = 30, $filter: String = ALL) {

app/components/LoggedInUser/NotificationsPage.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { withRouter, Link } from 'react-router'
+import { withRouter, Link } from 'react-router-dom'
 import { Flex, Box } from '@rebass/grid'
 import { translate } from 'react-i18next'
 import FlipMove from 'react-flip-move'
@@ -35,8 +35,8 @@ export default class NotificationsPage extends Component {
     })}`
   }
 
-  getFilter(location) {
-    return FILTERS.includes(location.query.filter) ? location.query.filter : 'ALL'
+  getFilter(searchParams) {
+    return FILTERS.includes(searchParams.filter) ? searchParams.filter : 'ALL'
   }
 
   renderFilters(selected) {
@@ -107,8 +107,9 @@ export default class NotificationsPage extends Component {
 
   render() {
     const { t, location } = this.props
-    const pageNumber = parseInt(location.query.page) || 1
-    const filter = this.getFilter(location)
+    const searchParams = new URLSearchParams(location.search)
+    const pageNumber = parseInt(searchParams.get('page')) || 1
+    const filter = this.getFilter(searchParams)
     const pollInterval = filter === 'ALL' && pageNumber === 1 ? 15000 : 0 // Only poll on first page
 
     return (

app/components/LoggedInUser/SubscriptionsPage.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Query } from '@apollo/client/react/components'
 import { get } from 'lodash'
 import { Flex, Box } from '@rebass/grid'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { Videos } from 'styled-icons/boxicons-solid'

app/components/Modal/Modal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { popModal } from '../../state/modals/reducer'

app/components/Moderation/Moderation.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { withNamespaces } from 'react-i18next'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 import { Report } from 'styled-icons/octicons'
 

app/components/Notifications/NotificationsPopupContent.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import { themeGet } from 'styled-system'
 import { Flex, Box } from '@rebass/grid'
 import { translate } from 'react-i18next'
@@ -12,12 +12,12 @@ import { Clock } from 'styled-icons/fa-regular'
 import { Check } from 'styled-icons/fa-solid'
 import { DotFill } from 'styled-icons/octicons'
 
-import StyledLink from '../StyledUtils/StyledLink'
 import { TimeSince } from '../Utils/TimeSince'
 import Container from '../StyledUtils/Container'
 import { Span } from '../StyledUtils/Text'
 import NotificationDetails from './NotificationDetails'
 import { userNotificationsURL } from '../../lib/cf_routes'
+import UnstyledButton from '../StyledUtils/UnstyledButton'
 
 const NotificationContainer = styled((props) => <Flex {...omit(props, ['hasBeenSeen'])} />)`
   display: flex;
@@ -53,7 +53,7 @@ const NotificationsPopupContent = ({ user, notifications, markAsSeen, t }) => {
         borderColor="black.100"
       >
         <Span fontWeight="bold">Notifications</Span>
-        <StyledLink
+        <UnstyledButton
           disabled={!hasUnseen}
           onClick={() =>
             markAsSeen(
@@ -63,7 +63,7 @@ const NotificationsPopupContent = ({ user, notifications, markAsSeen, t }) => {
           }
         >
           {t('markAllAsRead')}
-        </StyledLink>
+        </UnstyledButton>
       </Container>
       {notifications.length === 0 ? (
         <Box p={4}>{t('empty')}</Box>

app/components/Pages/BrowserExtensionsPage.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withNamespaces, Trans } from 'react-i18next'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import ReactPlayer from 'react-player'
 import styled from 'styled-components'
 import { Flex, Box } from '@rebass/grid'

app/components/Search/SearchBox.js

@@ -45,23 +45,23 @@ const StyledSearchBox = styled(AlgoliaSearchBox)`
 `
 
 /** Global Search Box */
-const SearchBox = ({ router, t }) => {
+const SearchBox = ({ location, history, t }) => {
   return (
     <StyledSearchBox
       translations={{ placeholder: t('search.placeholder') }}
       searchAsYouType={false}
       onSubmit={(e) => {
         e.preventDefault()
         const term = e.target.elements[0].value
-        const isSearchPage = router.location.pathname.startsWith('/search')
-        const route = isSearchPage ? router.location.pathname : '/search'
-        router.push({ pathname: route, query: { term } })
+        const isSearchPage = location.pathname.startsWith('/search')
+        const route = isSearchPage ? location.pathname : '/search'
+        history.push(`${route}?term=${encodeURIComponent(term)}`)
       }}
       onReset={(e) => {
         e.preventDefault()
-        const isSearchPage = router.location.pathname.startsWith('/search')
-        const route = isSearchPage ? router.location.pathname : '/search'
-        router.push({ pathname: route })
+        const isSearchPage = location.pathname.startsWith('/search')
+        const route = isSearchPage ? location.pathname : '/search'
+        history.push(route)
       }}
     />
   )

app/components/Search/SearchPage.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { withNamespaces, Trans } from 'react-i18next'
 import { connectSearchBox, Index, InfiniteHits } from 'react-instantsearch-dom'
 import styled from 'styled-components'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import capitalize from 'voca/capitalize'
 import { Search as SearchIcon } from 'styled-icons/fa-solid'
 
@@ -15,6 +15,7 @@ import { SpeakerHit } from './SpeakerHit'
 import StatementHit from './StatementHit'
 import { ALGOLIA_INDEXES_NAMES } from '../../lib/algolia'
 import SearchBox from './SearchBox'
+import { optionsToQueryString } from '../../lib/url_utils'
 
 const MainContainer = styled.div`
   background: #f4f5f8;
@@ -90,15 +91,16 @@ const ROUTES_ENTITIES = {
   statements: ENTITY_STATEMENT,
 }
 
-const SearchPage = ({ t, refine, router }) => {
-  const rawTerm = router.location.query.term
+const SearchPage = ({ t, refine, match, location }) => {
+  const searchParams = new URLSearchParams(location.search)
+  const rawTerm = searchParams.get('term')
   const term = rawTerm ? decodeURIComponent(rawTerm) : ''
 
   React.useEffect(() => {
     refine(term)
   }, [term])
-
-  const selectedEntity = ROUTES_ENTITIES[router.params.entity]
+  console.log(match)
+  const selectedEntity = ROUTES_ENTITIES[match.params.entity]
   return (
     <MainContainer>
       <Container background="white">
@@ -125,7 +127,9 @@ const SearchPage = ({ t, refine, router }) => {
           <SearchTabsUl>
             {Object.keys(ENTITIES_COMPONENTS).map((entity) => (
               <li key={entity} className={selectedEntity === entity ? 'is-active' : ''}>
-                <Link to={{ pathname: `/search/${entity}s`, query: { term } }}>
+                <Link
+                  to={{ pathname: `/search/${entity}s`, search: optionsToQueryString({ term }) }}
+                >
                   <SearchIcon size="1em" />
                   &nbsp; {capitalize(t(`entities.${entity}`, { count: 5 }))}
                   {term && (

app/components/Search/StatementHit.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Statement from '../Statements/Statement'
 import Container from '../StyledUtils/Container'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 import { withNamespaces } from 'react-i18next'
 import { statementURL } from '../../lib/cf_routes'