Utilisation des hooks React-Router

Sur les 9 utilisations de withRouter :
- suppression de 6 occurrences inutilisées
- migration d'1 occurrence vers le hook useLocation
- maintien de 2 occurrences inchangées car utilisées par des composants "class"

source/components/LangSwitcher.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react'
 import emoji from 'react-easy-emoji'
 import { withTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
 
 const languageCodeToEmoji = {
 	en: '🇬🇧',
@@ -11,7 +10,6 @@ const languageCodeToEmoji = {
 }
 
 export default compose(
-	withRouter,
 	withTranslation(),
 	connect(
 		null,

source/components/QuickLinks.js

@@ -4,7 +4,6 @@ import { T } from 'Components'
 import { compose, contains, filter, reject, toPairs } from 'ramda'
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
 import {
 	currentQuestionSelector,
 	nextStepsSelector
@@ -60,18 +59,15 @@ const QuickLinks = ({
 	)
 }
 
-export default (compose(
-	withRouter,
-	connect(
-		(state, props) => ({
-			key: props.language,
-			currentQuestion: currentQuestionSelector(state),
-			nextSteps: nextStepsSelector(state),
-			quickLinks: state.simulation?.config.questions?.["à l'affiche"],
-			quickLinksToHide: state.conversationSteps.foldedSteps
-		}),
-		{
-			goToQuestion
-		}
-	)
+export default (connect(
+	(state, props) => ({
+		key: props.language,
+		currentQuestion: currentQuestionSelector(state),
+		nextSteps: nextStepsSelector(state),
+		quickLinks: state.simulation?.config.questions?.["à l'affiche"],
+		quickLinksToHide: state.conversationSteps.foldedSteps
+	}),
+	{
+		goToQuestion
+	}
 )(QuickLinks): React$ComponentType<OwnProps>)

source/components/simulationConfigs/withSimulationConfig.js

@@ -2,7 +2,6 @@ import { resetSimulation, setSimulationConfig } from 'Actions/actions'
 import { compose } from 'ramda'
 import React from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
 import { noUserInputSelector } from 'Selectors/analyseSelectors'
 
 export default config => SimulationComponent =>
@@ -16,8 +15,7 @@ export default config => SimulationComponent =>
 				setSimulationConfig,
 				resetSimulation
 			}
-		),
-		withRouter
+		)
 	)(function DecoratedSimulation(props) {
 		if (config !== props.config) {
 			props.setSimulationConfig(config)

source/sites/mon-entreprise.fr/layout/Header/Header.js

@@ -8,7 +8,6 @@ import estimateSvg from 'Images/estimate.svg'
 import hiringSvg from 'Images/hiring.svg'
 import { compose } from 'ramda'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
 import { NavLink } from 'react-router-dom'
 import { régimeSelector } from 'Selectors/companyStatusSelectors'
 import './Header.css'
@@ -65,7 +64,6 @@ const StepsHeader = ({ showHiring, tracker, sitePaths }: Props) => (
 
 export default (compose(
 	withTracker,
-	withRouter,
 	connect(
 		state => ({ showHiring: régimeSelector(state) !== 'auto-entrepreneur' }),
 		{}

source/sites/mon-entreprise.fr/layout/Navigation/Navigation.js

@@ -7,7 +7,6 @@ import hiringSvg from 'Images/hiring.svg'
 import { compose } from 'ramda'
 import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
 import { NavLink } from 'react-router-dom'
 import './Navigation.css'
 import NavOpener from './NavOpener'
@@ -282,7 +281,6 @@ const StepsHeader = ({ sitePaths, companyStatusChoice }: Props) => {
 }
 
 export default (compose(
-	withRouter,
 	withSitePaths,
 	connect(
 		state => ({

source/sites/mon-entreprise.fr/layout/Navigation/SideBar.js

@@ -4,20 +4,18 @@ import classnames from 'classnames'
 import withTracker from 'Components/utils/withTracker'
 import { compose } from 'ramda'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { withRouter } from 'react-router'
+import { useLocation } from 'react-router'
 import backSvg from './back.svg'
 import mobileMenuSvg from './mobile-menu.svg'
 import './SideBar.css'
 import type Tracker from '../../../../Tracker'
-import type { Location } from 'react-router-dom'
 
 type OwnProps = {|
 	children: React$Node
 |}
 
 type Props = OwnProps & {
-	tracker: Tracker,
-	location: Location
+	tracker: Tracker
 }
 
 const bigScreen = window.matchMedia('(min-width: 1500px)')
@@ -31,7 +29,8 @@ const isParent = (parentNode, children) => {
 	return isParent(parentNode, children.parentNode)
 }
 
-function SideBar({ location, tracker, children }: Props) {
+function SideBar({ tracker, children }: Props) {
+	const location = useLocation()
 	const [opened, setOpened] = useState(false)
 	const [sticky, setSticky] = useState(bigScreen.matches)
 	const [previousLocation, setPreviousLocation] = useState(location)
@@ -89,7 +88,4 @@ function SideBar({ location, tracker, children }: Props) {
 	)
 }
 
-export default (compose(
-	withTracker,
-	withRouter
-)(SideBar): React$ComponentType<OwnProps>)
+export default (compose(withTracker)(SideBar): React$ComponentType<OwnProps>)

source/sites/mon-entreprise.fr/pages/Company/Find.js

@@ -7,7 +7,6 @@ import { useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { useTranslation } from 'react-i18next'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
 import ReactSelect from 'react-select'
 // $FlowFixMe
@@ -163,7 +162,6 @@ function Search({ sitePaths, onCompanyDetailsConfirmation }) {
 
 export default (compose(
 	withSitePaths,
-	withRouter,
 	connect(
 		null,
 		{