Fix some bug with react router change

site/package.json

@@ -88,8 +88,8 @@
 		"react-instantsearch": "^6.11.2",
 		"react-instantsearch-dom": "^6.11.2",
 		"react-redux": "^7.2.8",
-		"react-router": "^5.2.1",
-		"react-router-dom": "^5.3.0",
+		"react-router": "^5.3.3",
+		"react-router-dom": "^5.3.3",
 		"react-router-dom-v5-compat": "^6.3.0",
 		"react-signature-pad-wrapper": "^1.2.11",
 		"react-spring": "^9.3.1",

site/source/App.tsx

@@ -21,7 +21,7 @@ import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch } from 'react-router-dom'
-import { CompatRoute } from 'react-router-dom-v5-compat'
+import { CompatRoute, useLocation } from 'react-router-dom-v5-compat'
 import styled, { css } from 'styled-components'
 import Accessibilité from './pages/Accessibilité'
 import Budget from './pages/Budget/Budget'
@@ -132,7 +132,7 @@ const App = () => {
 					/>
 					<Route path={sitePaths.développeur.index} component={Integration} />
 					<Route path={sitePaths.nouveautés} component={Nouveautés} />
-					<Route path={sitePaths.stats} component={Stats} />
+					<CompatRoute path={sitePaths.stats} component={Stats} />
 					<Route path={sitePaths.budget} component={Budget} />
 					<Route path={sitePaths.accessibilité} component={Accessibilité} />
 

site/source/components/Feedback/index.tsx

@@ -7,7 +7,7 @@ import { Link } from '@/design-system/typography/link'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 import React, { useCallback, useContext, useState } from 'react'
 import { Trans } from 'react-i18next'
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router-dom-v5-compat'
 import styled from 'styled-components'
 import { TrackingContext } from '../../ATInternetTracking'
 import * as safeLocalStorage from '../../storage/safeLocalStorage'

site/source/components/Route404.tsx

@@ -1,6 +1,6 @@
 import image from '@/images/map-directions.png'
 import { Trans } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom-v5-compat'
 import Emoji from './utils/Emoji'
 
 export default function Route404() {

site/source/design-system/card/Article.tsx

@@ -10,7 +10,7 @@ import {
 import { Body } from '@/design-system/typography/paragraphs'
 import { useButton } from '@react-aria/button'
 import React, { useRef } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import { Link } from 'react-router-dom-v5-compat'
 import styled from 'styled-components'
 import { GenericCardProps, getTitleProps } from './Card'
 
@@ -27,12 +27,8 @@ export function Article({
 	icon,
 	...ariaButtonProps
 }: ArticleProps) {
-	const elementType: 'a' | 'div' | typeof RouterLink =
-		'href' in ariaButtonProps
-			? 'a'
-			: 'to' in ariaButtonProps
-			? RouterLink
-			: 'div'
+	const elementType: 'a' | 'div' | typeof Link =
+		'href' in ariaButtonProps ? 'a' : 'to' in ariaButtonProps ? Link : 'div'
 
 	const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null)
 	const { buttonProps } = useButton({ elementType, ...ariaButtonProps }, ref)

site/source/design-system/card/SmallCard.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/design-system/typography/link'
 import { SmallBody } from '@/design-system/typography/paragraphs'
 import React, { useRef } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import { Link } from 'react-router-dom-v5-compat'
 import styled from 'styled-components'
 import { GenericCardProps, getTitleProps } from './Card'
 
@@ -17,18 +17,11 @@ export function SmallCard({
 	title,
 	...ariaButtonProps
 }: GenericCardProps & { icon: React.ReactNode }) {
-	const elementType: 'a' | 'div' | typeof RouterLink =
-		'href' in ariaButtonProps
-			? 'a'
-			: 'to' in ariaButtonProps
-			? RouterLink
-			: 'div'
+	const elementType: 'a' | 'div' | typeof Link =
+		'href' in ariaButtonProps ? 'a' : 'to' in ariaButtonProps ? Link : 'div'
 
 	const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null)
-	const { buttonProps } = useButton(
-		{ elementType, ...ariaButtonProps },
-		ref
-	) as any
+	const { buttonProps } = useButton({ elementType, ...ariaButtonProps }, ref)
 	const titleProps = getTitleProps(title, 'h4')
 	const linkProps = useExternalLinkProps(ariaButtonProps)
 

site/source/design-system/popover/PopoverWithTrigger.tsx

@@ -10,7 +10,7 @@ import React, {
 	useMemo,
 	useRef,
 } from 'react'
-import { useLocation } from 'react-router'
+import { useLocation } from 'react-router-dom-v5-compat'
 import Popover from './Popover'
 import { Link } from '../typography/link'
 

site/source/design-system/stepper/index.tsx

@@ -5,7 +5,7 @@ import { AriaButtonProps } from '@react-types/button'
 
 import styled, { css } from 'styled-components'
 import { Link } from '../typography/link'
-import { Link as RouterLink } from 'react-router-dom'
+import { Link as RouterLink } from 'react-router-dom-v5-compat'
 import { useRouteMatch } from 'react-router'
 
 import { ComponentPropsWithRef } from 'react'

site/source/entry-server.tsx

@@ -1,12 +1,12 @@
-import ReactDOMServer from 'react-dom/server'
 import { SSRProvider } from '@react-aria/ssr'
-import { StaticRouter } from 'react-router-dom'
-import i18next from './locales/i18n'
-import { AppFr } from './entry-fr'
-import { AppEn } from './entry-en'
-import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import ReactDOMServer from 'react-dom/server'
 import { FilledContext, HelmetProvider } from 'react-helmet-async'
+import { StaticRouter } from 'react-router-dom'
 import { CompatRouter } from 'react-router-dom-v5-compat'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import { AppEn } from './entry-en'
+import { AppFr } from './entry-fr'
+import i18next from './locales/i18n'
 
 export function render(url: string, lang: 'fr' | 'en') {
 	const sheet = new ServerStyleSheet()

site/source/pages/Creer/GuideStatut/index.tsx

@@ -3,11 +3,12 @@ import { FromBottom } from '@/components/ui/animate'
 import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { H1 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
+import { RootState } from '@/reducers/rootReducer'
 import { useContext, useEffect } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { Route, Switch, useLocation } from 'react-router-dom'
-import { RootState } from '@/reducers/rootReducer'
+import { Navigate } from 'react-router-dom-v5-compat'
 import { TrackChapter } from '../../../ATInternetTracking'
 import AutoEntrepreneur from './AutoEntrepreneur'
 import DirectorStatus from './DirectorStatus'
@@ -86,6 +87,9 @@ export default function Créer() {
 						<Route path={sitePaths.créer.guideStatut.liste}>
 							<PickLegalStatus />
 						</Route>
+						<Route path={sitePaths.créer.guideStatut.index}>
+							<Navigate to={sitePaths.créer.guideStatut.liste} replace />
+						</Route>
 					</Switch>
 				</FromBottom>
 			</TrackChapter>

site/source/pages/Simulateurs/EconomieCollaborative/Activité.tsx

@@ -6,10 +6,12 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Radio, RadioGroup } from '@/design-system/field'
 import { H1, H2, H3 } from '@/design-system/typography/heading'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
+import { getValueFrom } from '@/utils'
 import { formatValue } from 'publicodes'
 import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Redirect } from 'react-router-dom'
+import { useParams } from 'react-router-dom-v5-compat'
 import { TrackPage } from '../../../ATInternetTracking'
 import { selectSeuilRevenus } from './actions'
 import { getTranslatedActivité } from './activitésData'
@@ -18,22 +20,14 @@ import Exonérations from './Exonérations'
 import NextButton from './NextButton'
 import { estExonéréeSelector } from './selectors'
 import { StoreContext } from './StoreContext'
-import { getValueFrom } from '@/utils'
 
 export type Activity = {
 	titre: string
 	explication: string
 }
 
-interface Props {
-	match: { params: { title: string } }
-}
-
-export default function Activité({
-	match: {
-		params: { title },
-	},
-}: Props) {
+export default function Activité() {
+	const { title = '' } = useParams()
 	const { language } = useTranslation().i18n
 	const sitePaths = useContext(SitePathsContext)
 	const { state, dispatch } = useContext(StoreContext)

site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx

@@ -12,7 +12,7 @@ import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
-import { Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom-v5-compat'
 import { TrackPage } from '../../../ATInternetTracking'
 import { ActiviteCard } from './ActiviteCard'
 import illustration from './images/multitasking.svg'
@@ -28,9 +28,11 @@ export default function VotreSituation() {
 	const sitePaths = useContext(SitePathsContext)
 	const { state } = useContext(StoreContext)
 	const { t } = useTranslation()
+
 	if (!activitésEffectuéesSelector(state).length) {
-		return <Redirect to={sitePaths.simulateurs.économieCollaborative.index} />
+		return <Navigate to={'..'} replace />
 	}
+
 	const titre = t(
 		'économieCollaborative.obligations.titre',
 		'Que dois-je faire pour être en règle ?'
@@ -38,13 +40,7 @@ export default function VotreSituation() {
 
 	const nextActivité = nextActivitéSelector(state)
 	if (nextActivité) {
-		return (
-			<Redirect
-				to={
-					sitePaths.simulateurs.économieCollaborative.index + '/' + nextActivité
-				}
-			/>
-		)
+		return <Navigate to={'../' + nextActivité} replace />
 	}
 
 	const déclarations = déclarationsSelector(state)

site/source/pages/Simulateurs/EconomieCollaborative/index.tsx

@@ -3,7 +3,7 @@ import { SitePathsContext } from '@/components/utils/SitePathsContext'
 import { Link } from '@/design-system/typography/link'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
-import { Route, Switch } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom-v5-compat'
 import { TrackChapter } from '../../../ATInternetTracking'
 import useSimulatorsData from '../metadata'
 import Activité from './Activité'
@@ -19,6 +19,8 @@ export default function ÉconomieCollaborative() {
 		? '/iframes/' + iframePath
 		: sitePaths.simulateurs.économieCollaborative.index
 
+	const relative = (path: string) => path.replace(/.*\//, '/')
+
 	return (
 		<TrackChapter chapter1="simulateurs" chapter2="economie_collaborative">
 			<div css="transform: translateY(2rem)">
@@ -30,17 +32,16 @@ export default function ÉconomieCollaborative() {
 				</Link>
 			</div>
 			<StoreProvider localStorageKey="app::économie-collaborative:v1">
-				<Switch>
-					<Route exact path={indexPath} component={ActivitésSelection} />
+				<Routes>
+					<Route path={'/'} element={<ActivitésSelection />} />
 					<Route
-						path={sitePaths.simulateurs.économieCollaborative.votreSituation}
-						component={VotreSituation}
+						path={relative(
+							sitePaths.simulateurs.économieCollaborative.votreSituation
+						)}
+						element={<VotreSituation />}
 					/>
-					<Route
-						path={sitePaths.simulateurs.économieCollaborative.index + '/:title'}
-						component={Activité}
-					/>
-				</Switch>
+					<Route path={':title'} element={<Activité />} />
+				</Routes>
 			</StoreProvider>
 		</TrackChapter>
 	)

site/source/pages/Simulateurs/index.tsx

@@ -32,7 +32,7 @@ export default function Simulateurs() {
 				.map((s) => (
 					<Route
 						key={s.path}
-						path={s.path}
+						path={s.path + '/*'}
 						element={<SimulateurPage {...s} />}
 					/>
 				)),

yarn.lock

@@ -18800,20 +18800,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "react-router-dom@npm:5.3.0"
+"react-router-dom@npm:^5.3.3":
+  version: 5.3.3
+  resolution: "react-router-dom@npm:5.3.3"
   dependencies:
     "@babel/runtime": ^7.12.13
     history: ^4.9.0
     loose-envify: ^1.3.1
     prop-types: ^15.6.2
-    react-router: 5.2.1
+    react-router: 5.3.3
     tiny-invariant: ^1.0.2
     tiny-warning: ^1.0.0
   peerDependencies:
     react: ">=15"
-  checksum: 47584fd629ecca52398d7888cab193b8a74057cc99a7ef44410c405d4082f618c3c0399db5325bc3524f9c511404086169570013b61a94dfa6acdfdc850d7a1f
+  checksum: e1998918e391611f09b967bce0cb88bc9794aa3d8dc5f86453467a1226ae2ace648a1f401f5282f19c84a3a61fa6a3207e2a6fdfe8c8efae0b255244631febeb
   languageName: node
   linkType: hard
 
@@ -18830,9 +18830,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:5.2.1, react-router@npm:^5.2.1":
-  version: 5.2.1
-  resolution: "react-router@npm:5.2.1"
+"react-router@npm:5.3.3, react-router@npm:^5.3.3":
+  version: 5.3.3
+  resolution: "react-router@npm:5.3.3"
   dependencies:
     "@babel/runtime": ^7.12.13
     history: ^4.9.0
@@ -18846,7 +18846,7 @@ __metadata:
     tiny-warning: ^1.0.0
   peerDependencies:
     react: ">=15"
-  checksum: 7daae084bf64531eb619cc5f4cc40ce5ae0a541b64f71d74ec71a38cbf6130ebdbb7cf38f157303fad5846deec259401f96c4d6c7386466dcc989719e01f9aaa
+  checksum: 52a9f28fa97577fda18a8ed2922b658704eafe873e444fe07202640d55d9e81e67c03efd2b2a5b80e3a80e8be8352df826a227ce5f42b33b91bef853c74d4841
   languageName: node
   linkType: hard
 
@@ -20246,8 +20246,8 @@ __metadata:
     react-instantsearch: ^6.11.2
     react-instantsearch-dom: ^6.11.2
     react-redux: ^7.2.8
-    react-router: ^5.2.1
-    react-router-dom: ^5.3.0
+    react-router: ^5.3.3
+    react-router-dom: ^5.3.3
     react-router-dom-v5-compat: ^6.3.0
     react-signature-pad-wrapper: ^1.2.11
     react-spring: ^9.3.1