Change le chemin des règles vers "documentation"

2019-01-11 11:46:02 +01:00 · 2019-01-11 11:46:02 +01:00 · 11ec962754
parent e8b689b010
commit 11ec962754
40 changed files with 505 additions and 387 deletions
--- a/source/Provider.js
+++ b/source/Provider.js
@ -1,4 +1,5 @@
 import SetCSSColour from 'Components/utils/SetCssColour'
+import { SitePathProvider } from 'Components/utils/withSitePaths'
 import { TrackerProvider } from 'Components/utils/withTracker'
 import createHistory from 'history/createBrowserHistory'
 import i18next from 'i18next'
@ -66,12 +67,14 @@ export default class Layout extends PureComponent {
 			// If IE < 11 display nothing
 			<Provider store={this.store}>
 				<TrackerProvider value={this.props.tracker}>
-					<SetCSSColour />
-					<I18nextProvider i18n={i18next}>
-						<Router history={this.history}>
-							<>{this.props.children}</>
-						</Router>
-					</I18nextProvider>
+					<SitePathProvider value={this.props.sitePaths}>
+						<SetCSSColour />
+						<I18nextProvider i18n={i18next}>
+							<Router history={this.history}>
+								<>{this.props.children}</>
+							</Router>
+						</I18nextProvider>
+					</SitePathProvider>
 				</TrackerProvider>
 			</Provider>
 		)
--- a/source/actions/actions.js
+++ b/source/actions/actions.js
@ -51,6 +51,17 @@ export function setExample(name, situation, dottedName) {
 	return { type: 'SET_EXAMPLE', name, situation, dottedName }
 }

+export const goBackToSimulation = () => (
+	dispatch: any => void,
+	_: any,
+	history: RouterHistory
+): void => {
+	while (history.location.pathname.includes('documentation')) {
+		history.goBack()
+	}
+	dispatch({ type: 'SET_EXAMPLE', name: null })
+}
+
 export function loadPreviousSimulation(): LoadPreviousSimulationAction {
 	return {
 		type: 'LOAD_PREVIOUS_SIMULATION'
--- a/source/components/ComparativeTargets.js
+++ b/source/components/ComparativeTargets.js
@ -1,6 +1,7 @@
 import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
-import { findRuleByDottedName } from 'Engine/rules'
+import withSitePaths from 'Components/utils/withSitePaths'
+import { encodeRuleName, findRuleByDottedName } from 'Engine/rules'
 import { compose } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
@ -26,7 +27,8 @@ export default compose(
 			setSituationBranch: id => dispatch({ type: 'SET_SITUATION_BRANCH', id })
 		})
 	),
-	withColours
+	withColours,
+	withSitePaths
 )(
 	class ComparativeTargets extends React.Component {
 		render() {
@ -35,6 +37,7 @@ export default compose(
 				analyses,
 				target,
 				setSituationBranch,
+				sitePaths,
 				simulationBranches
 			} = this.props
 			if (!simulationBranches) {
@ -44,7 +47,6 @@ export default compose(
 			// This is not elegant
 			let getRatioPrélèvements = analysis =>
 				analysis.targets.find(t => t.dottedName === 'ratio de prélèvements')
-
 			return (
 				<div id="comparative-targets">
 					<h3>{target.title}</h3>
@ -87,7 +89,11 @@ export default compose(
 												<Link
 													title="Quel est calcul ?"
 													style={{ color: this.props.colours.colour }}
-													to={'/règle/' + dottedName}
+													to={
+														sitePaths.documentation.index +
+														'/' +
+														encodeRuleName(dottedName)
+													}
 													onClick={() => setSituationBranch(i)}
 													className="explanation">
 													{emoji('📖')}
@ -99,7 +105,11 @@ export default compose(
 												de{' '}
 												<Link
 													style={{ color: 'white' }}
-													to={'/règle/' + ratioPrélèvements.dottedName}>
+													to={
+														sitePaths.documentation.index +
+														'/' +
+														encodeRuleName(ratioPrélèvements.dottedName)
+													}>
 													prélèvements
 												</Link>
 											</small>
--- a/source/components/RuleLink.js
+++ b/source/components/RuleLink.js
@ -1,21 +1,26 @@
 /* @flow */
 import withColours from 'Components/utils/withColours'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import React from 'react'
-import { withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
-import { capitalise0, normalizeBasePath } from '../utils'
+import { capitalise0 } from '../utils'
 import './RuleLink.css'
 import type { Règle } from 'Types/RegleTypes'
-import type { Match } from 'react-router'
+
 type Props = Règle & {
-	match: Match,
+	sitePaths: Object,
 	style: CSSStyleDeclaration,
 	colours: { colour: string }
 }
-const RuleLink = ({ lien, nom, colours: { colour }, match, style }: Props) => {
-	const newPath =
-		normalizeBasePath(match.path).replace(/simulation\/$/, '') + lien
+const RuleLink = ({
+	lien,
+	nom,
+	colours: { colour },
+	style,
+	sitePaths
+}: Props) => {
+	const newPath = sitePaths.documentation.index + '/' + lien
 	return (
 		<Link
 			to={newPath}
@ -27,6 +32,6 @@ const RuleLink = ({ lien, nom, colours: { colour }, match, style }: Props) => {
 }

 export default compose(
-	withRouter,
+	withSitePaths,
 	withColours
 )(RuleLink)
--- a/source/components/RulePage.js
+++ b/source/components/RulePage.js
@ -1,4 +1,4 @@
-import { setExample } from 'Actions/actions'
+import { goBackToSimulation } from 'Actions/actions'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import { encodeRuleName } from 'Engine/rules'
 import {
@ -25,9 +25,9 @@ export default compose(
 	connect(state => ({
 		themeColours: state.themeColours,
 		valuesToShow: !noUserInputSelector(state),
-		flatRules: flatRulesSelector(state),
-		situationBranch:
-			state.simulationConfig?.branches[state.situationBranch]?.nom
+		flatRules: flatRulesSelector(state)
+		// situationBranch:
+		// 	state.simulationConfig?.branches[state.situationBranch]?.nom
 	})),
 	withNamespaces()
 )(
@ -57,7 +57,7 @@ export default compose(
 			let { situationBranch } = this.props
 			return (
 				<div id="RulePage">
-					<ScrollToTop />
+					<ScrollToTop key={situationBranch + dottedName} />
 					<div className="rule-page__header ui__ container">
 						<BackToSimulation
 							visible={this.props.valuesToShow}
@ -66,10 +66,7 @@ export default compose(
 						{situationBranch && (
 							<span id="situationBranch">{situationBranch}</span>
 						)}
-						<SearchButton
-							className="rule-page__search"
-							rulePageBasePath="../règle"
-						/>
+						<SearchButton className="rule-page__search" rulePageBasePath="" />
 					</div>
 					<Rule dottedName={dottedName} />
 				</div>
@ -81,12 +78,7 @@ export default compose(
 const BackToSimulation = compose(
 	connect(
 		null,
-		dispatch => ({
-			setExample: compose(
-				dispatch,
-				setExample
-			)
-		})
+		{ goBackToSimulation }
 	),
 	withRouter,
 	withNamespaces()
@ -94,18 +86,20 @@ const BackToSimulation = compose(
 	// Triggers rerender when the language changes
 	class BackToSimulation extends Component {
 		render() {
-			let { colour, setExample, visible } = this.props
+			let { goBackToSimulation, visible } = this.props
 			return (
-				<Link
-					id="toSimulation"
+				<button
 					to="../simulation"
-					onClick={() => {
-						setExample(null)
-					}}
-					style={{ color: colour, visibility: visible ? 'visible' : 'hidden' }}>
-					<i className="fa fa-arrow-left" aria-hidden="true" />
+					className="ui__ link-button"
+					onClick={goBackToSimulation}
+					style={{ visibility: visible ? 'visible' : 'hidden' }}>
+					<i
+						className="fa fa-arrow-left"
+						aria-hidden="true"
+						style={{ paddingRight: '0.2rem' }}
+					/>
 					<Trans i18nKey="back">Reprendre la simulation</Trans>
-				</Link>
+				</button>
 			)
 		}
 	}
@ -122,7 +116,7 @@ let DisambiguateRuleQuery = ({ rules, flatRules }) => (
 			{rules.map(({ dottedName, ns, title }) => (
 				<li key={dottedName}>
 					<Namespace ns={ns} flatRules={flatRules} />
-					<Link to={'../règle/' + encodeRuleName(dottedName)}>{title}</Link>
+					<Link to={'' + encodeRuleName(dottedName)}>{title}</Link>
 				</li>
 			))}
 		</ul>
--- a/source/components/SalarySimulation.js
+++ b/source/components/SalarySimulation.js
@ -1,9 +1,12 @@
 import { startConversation } from 'Actions/actions'
 import { Component, React, T } from 'Components'
 import AnswerList from 'Components/AnswerList'
+import Distribution from 'Components/Distribution'
+import PaySlip from 'Components/PaySlip'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import emoji from 'react-easy-emoji'
 import { Trans, withNamespaces } from 'react-i18next'
@ -18,12 +21,9 @@ import {
 	validInputEnteredSelector
 } from 'Selectors/analyseSelectors'
 import * as Animate from 'Ui/animate'
-import sitePaths from '../sites/mycompanyinfrance.fr/sitePaths'
 import { normalizeBasePath } from '../utils'
 import Conversation from './conversation/Conversation'
-import Distribution from './Distribution'
 import PageFeedback from './Feedback/PageFeedback'
-import PaySlip from './PaySlip'
 import QuickLink from './QuickLink'
 import ResultView from './ResultView'
 import './SalarySimulation.css'
@ -47,7 +47,8 @@ export default compose(
 			startConversation
 		}
 	),
-	withLanguage
+	withLanguage,
+	withSitePaths
 )(
 	class Simulation extends Component {
 		state = {
@ -59,13 +60,13 @@ export default compose(
 				conversationStarted,
 				arePreviousAnswers,
 				nextSteps,
-				startConversation,
 				blockingInputControls,
 				displayHiringProcedures,
 				match,
 				validInputEntered,
-				location,
 				period,
+				location,
+				sitePaths,
 				noUserInput
 			} = this.props
 			const displayConversation = conversationStarted && !blockingInputControls
@ -143,7 +144,7 @@ export default compose(
 											<div style={{ textAlign: 'center' }}>
 												<Link
 													className="ui__ button"
-													to={sitePaths().démarcheEmbauche}>
+													to={sitePaths.démarcheEmbauche}>
 													<Trans i18nKey="simulation-end.cta">
 														Connaître les démarches
 													</Trans>
@ -185,7 +186,7 @@ export default compose(
 							/>
 						)}
 					</div>
-					{/* {!location.pathname.endsWith('/simulation') && validInputEntered && (
+					{!location.pathname.endsWith('/simulation') && validInputEntered && (
 						<Animate.fromBottom>
 							<div style={{ textAlign: 'center' }}>
 								{arePreviousAnswers && conversationStarted && (
@ -229,7 +230,7 @@ export default compose(
 							</h2>
 							<PaySlip />
 						</Animate.fromBottom>
-					)} */}
+					)}
 				</>
 			)
 		}
--- a/source/components/SearchBar.js
+++ b/source/components/SearchBar.js
@ -1,6 +1,7 @@
+import withSitePaths from 'Components/utils/withSitePaths'
 import { encodeRuleName } from 'Engine/rules.js'
 import Fuse from 'fuse.js'
-import { sortBy, pick } from 'ramda'
+import { compose, pick, sortBy } from 'ramda'
 import React from 'react'
 import Highlighter from 'react-highlight-words'
 import { withNamespaces } from 'react-i18next'
@ -70,7 +71,11 @@ class SearchBar extends React.Component {
 			this.props.finally && this.props.finally()
 			return (
 				<Redirect
-					to={'../règle/' + encodeRuleName(selectedOption.dottedName)}
+					to={
+						this.props.sitePaths.documentation.index +
+						'/' +
+						encodeRuleName(selectedOption.dottedName)
+					}
 				/>
 			)
 		}
@ -99,7 +104,7 @@ class SearchBar extends React.Component {
 							<li key={rule.dottedName}>
 								<Link
 									to={
-										this.props.rulePagesBasePath +
+										this.props.sitePaths.documentation.index +
 										'/' +
 										encodeRuleName(rule.name)
 									}>
@ -114,4 +119,7 @@ class SearchBar extends React.Component {
 	}
 }

-export default withNamespaces()(SearchBar)
+export default compose(
+	withSitePaths,
+	withNamespaces()
+)(SearchBar)
--- a/source/components/SearchButton.js
+++ b/source/components/SearchButton.js
@ -39,13 +39,12 @@ export default compose(
 			return this.state.visible ? (
 				<Overlay onClose={this.close}>
 					<h2>
-						<Trans>Chercher une règle</Trans>
+						<Trans>Chercher dans la documentation</Trans>
 					</h2>
 					<SearchBar
 						showDefaultList={false}
 						finally={this.close}
 						rules={flatRules}
-						rulePagesBasePath={this.props.rulePagesBasePath}
 					/>
 				</Overlay>
 			) : (
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@ -3,6 +3,7 @@ import InputSuggestions from 'Components/conversation/InputSuggestions'
 import PeriodSwitch from 'Components/PeriodSwitch'
 import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { encodeRuleName, findRuleByDottedName } from 'Engine/rules'
 import { compose, propEq } from 'ramda'
 import React, { Component } from 'react'
@ -18,7 +19,6 @@ import {
 	flatRulesSelector,
 	noUserInputSelector
 } from 'Selectors/analyseSelectors'
-import { normalizeBasePath } from '../utils'
 import AnimatedTargetValue from './AnimatedTargetValue'
 import CurrencyInput from './CurrencyInput/CurrencyInput'
 import ProgressCircle from './ProgressCircle'
@ -139,32 +139,32 @@ export default compose(
 	}
 )

-let Header = ({
-	target,
-	conversationStarted,
-	isActiveInput,
-	blockingInputControls,
-	match
-}) => {
-	const ruleLink =
-		normalizeBasePath(match.path).replace(/simulation\/$/, '') +
-		'règle/' +
-		encodeRuleName(target.dottedName)
-	return (
-		<span className="header">
-			{conversationStarted && !blockingInputControls && (
-				<ProgressCircle target={target} isActiveInput={isActiveInput} />
-			)}
+let Header = withSitePaths(
+	({
+		target,
+		conversationStarted,
+		isActiveInput,
+		blockingInputControls,
+		sitePaths
+	}) => {
+		const ruleLink =
+			sitePaths.documentation.index + '/' + encodeRuleName(target.dottedName)
+		return (
+			<span className="header">
+				{conversationStarted && !blockingInputControls && (
+					<ProgressCircle target={target} isActiveInput={isActiveInput} />
+				)}

-			<span className="texts">
-				<span className="optionTitle">
-					<Link to={ruleLink}>{target.title || target.name}</Link>
+				<span className="texts">
+					<span className="optionTitle">
+						<Link to={ruleLink}>{target.title || target.name}</Link>
+					</span>
+					{!conversationStarted && <p>{target['résumé']}</p>}
 				</span>
-				{!conversationStarted && <p>{target['résumé']}</p>}
 			</span>
-		</span>
-	)
-}
+		)
+	}
+)

 let CurrencyField = withColours(props => {
 	return (
@ -260,6 +260,7 @@ const TargetValue = connect(
 const AidesGlimpse = compose(
 	withColours,
 	withRouter,
+	withSitePaths,
 	connect(state => ({ analysis: analysisWithDefaultsSelector(state) }))
 )(
 	class AidesGlimpse extends Component {
@ -277,11 +278,8 @@ const AidesGlimpse = compose(
 					- <AnimatedTargetValue value={aides.nodeValue} />{' '}
 					<Link
 						to={
-							normalizeBasePath(this.props.match.path).replace(
-								/simulation\/$/,
-								''
-							) +
-							'règle/' +
+							this.props.sitePaths.documentation.index +
+							'/' +
 							encodeRuleName('contrat salarié . aides employeur')
 						}
 						style={{ color: this.props.colours.textColour }}>
--- a/source/components/Targets.js
+++ b/source/components/Targets.js
@ -1,20 +1,24 @@
 import withColours from 'Components/utils/withColours'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
+import sitePaths from '../../sites/mycompanyinfrance.fr/sitePaths';
 import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
 import './Targets.css'
 export default compose(
 	connect(state => ({ analysis: analysisWithDefaultsSelector(state) })),
-	withColours
+	withColours,
+	withSitePaths,
 )(
 	class Targets extends React.Component {
 		render() {
 			let {
 				title,
 				nodeValue,
+				sitePaths,
 				unité: unit,
 				dottedName
 			} = this.props.analysis.targets[0]
@ -33,7 +37,7 @@ export default compose(
 						<Link
 							title="Quel est calcul ?"
 							style={{ color: this.props.colours.colour }}
-							to={'/règle/' + dottedName}
+							to={sitePaths.documentation.index + '/' + dottedName}
 							className="explanation">
 							{emoji('📖')}
 						</Link>
--- a/source/components/rule/Namespace.js
+++ b/source/components/rule/Namespace.js
@ -1,43 +1,49 @@
+import withSitePaths from 'Components/utils/withSitePaths'
 import { encodeRuleName, findRuleByDottedName } from 'Engine/rules'
 import React from 'react'
+import emoji from 'react-easy-emoji'
 import { Link } from 'react-router-dom'
 import { capitalise0 } from '../../utils'
 import './Namespace.css'
-import emoji from 'react-easy-emoji'

-let Namespace = ({ ns, flatRules, colour }) => (
-	<ul id="namespace">
-		{ns
-			.split(' . ')
-			.reduce(
-				(memo, next) => [
-					...memo,
-					[...(memo.length ? memo.reverse()[0] : []), next]
-				],
-				[]
-			)
-			.map(fragments => {
-				let ruleName = fragments.join(' . '),
-					rule = findRuleByDottedName(flatRules, ruleName)
-				if (!rule) {
-					throw new Error(
-						`Attention, il se peut que la règle ${ruleName}, ait été définie avec un namespace qui n'existe pas.`
-					)
-				}
-				let ruleText = rule.title || capitalise0(rule.name),
-					style = { color: colour }
-
-				return (
-					<li style={style} key={fragments.join()}>
-						<Link style={style} to={'../règle/' + encodeRuleName(ruleName)}>
-							{rule.icon && <span>{emoji(rule.icon)} </span>}
-							{ruleText}
-						</Link>
-						{' › '}
-					</li>
+let Namespace = ({ ns, flatRules, colour, sitePaths }) => {
+	return (
+		<ul id="namespace">
+			{ns
+				.split(' . ')
+				.reduce(
+					(memo, next) => [
+						...memo,
+						[...(memo.length ? memo.reverse()[0] : []), next]
+					],
+					[]
 				)
-			})}
-	</ul>
-)
+				.map(fragments => {
+					let ruleName = fragments.join(' . '),
+						rule = findRuleByDottedName(flatRules, ruleName)
+					if (!rule) {
+						throw new Error(
+							`Attention, il se peut que la règle ${ruleName}, ait été définie avec un namespace qui n'existe pas.`
+						)
+					}
+					let ruleText = rule.title || capitalise0(rule.name),
+						style = { color: colour }

-export default Namespace
+					return (
+						<li style={style} key={fragments.join()}>
+							<Link
+								style={style}
+								to={
+									sitePaths.documentation.index + '/' + encodeRuleName(ruleName)
+								}>
+								{rule.icon && <span>{emoji(rule.icon)} </span>}
+								{ruleText}
+							</Link>
+							{' › '}
+						</li>
+					)
+				})}
+		</ul>
+	)
+}
+export default withSitePaths(Namespace)
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@ -1,5 +1,6 @@
 import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { getInputComponent } from 'Engine/generateQuestions'
 import knownMecanisms from 'Engine/known-mecanisms.yaml'
 import { createMarkdownDiv } from 'Engine/marked'
@ -29,16 +30,17 @@ import Examples from './Examples'
 import RuleHeader from './Header'
 import References from './References'
 import './Rule.css'
+import sitePaths from '../../sites/mycompanyinfrance.fr/sitePaths';

 let LazySource = React.lazy(() => import('./RuleSource'))

 export default compose(
-	connect(state => ({
+	connect((state, props) => ({
 		currentExample: state.currentExample,
 		flatRules: flatRulesSelector(state),
 		valuesToShow: !noUserInputSelector(state),
-		analysedRule: ruleAnalysisSelector(state),
-		analysedExample: exampleAnalysisSelector(state)
+		analysedRule: ruleAnalysisSelector(state, props),
+		analysedExample: exampleAnalysisSelector(state, props)
 	})),
 	AttachDictionary(knownMecanisms),
 	withNamespaces(),
@ -73,7 +75,7 @@ export default compose(
 						</>
 					) : (
 						<div id="rule" className="ui__ container">
-							<Animate.fromBottom key={title}>
+							<Animate.fromBottom>
 								<Helmet>
 									<title>{title}</title>
 									<meta name="description" content={description} />
@ -170,7 +172,8 @@ export default compose(
 	}
 )

-let NamespaceRulesList = withColours(({ namespaceRules, colours }) => (
+let NamespaceRulesList = compose(withColours, withSitePaths)(({ namespaceRules, colours, sitePaths }) => {
+	return (
 	<section>
 		<h2>
 			<Trans>Règles associées</Trans>
@ -183,14 +186,15 @@ let NamespaceRulesList = withColours(({ namespaceRules, colours }) => (
 							color: colours.textColourOnWhite,
 							textDecoration: 'underline'
 						}}
-						to={'../règle/' + encodeRuleName(r.dottedName)}>
+						to={sitePaths.documentation.index + '/' + encodeRuleName(r.dottedName)}>
 						{r.title || r.name}
 					</Link>
 				</li>
 			))}
 		</ul>
 	</section>
-))
+)
+					})

 const UserInput = reduxForm({
 	form: 'conversation',
--- a/source/components/rule/RuleValueVignette.js
+++ b/source/components/rule/RuleValueVignette.js
@ -7,7 +7,7 @@ import './RuleValueVignette.css'

 let RuleValueVignette = ({ name, title, nodeValue: ruleValue }) => (
 	<span key={name} className="RuleValueVignette">
-		<Link to={'../règle/' + encodeRuleName(name)}>
+		<Link to={encodeRuleName(name)}>
 			<div className="rule-box">
 				<span className="rule-name">{title}</span>
 				<RuleValue ruleValue={ruleValue} />
--- a/source/components/simulationConfigs/withSimulationConfig.js
+++ b/source/components/simulationConfigs/withSimulationConfig.js
@ -1,4 +1,3 @@
-import { resetSimulation } from 'Actions/actions'
 import React from 'react'
 import { connect } from 'react-redux'

@ -8,7 +7,6 @@ export default config => SimulationComponent =>
 		dispatch => ({
 			setSimulation: () => {
 				dispatch({ type: 'SET_SIMULATION_CONFIG', config })
-				dispatch(resetSimulation())
 			}
 		})
 	)(
--- a/source/components/utils/withSitePaths.js
+++ b/source/components/utils/withSitePaths.js
@ -0,0 +1,29 @@
+/* @flow */
+
+import React, { Component, createContext } from 'react'
+import type { ComponentType } from 'react'
+
+export type SitePaths = Object
+
+const SitePathsContext = createContext({})
+
+export const SitePathProvider = SitePathsContext.Provider
+export default function withSitePaths<Props: { sitePaths: SitePaths }>(
+	WrappedComponent: ComponentType<Props>
+) {
+	class WithSitePaths extends Component<
+		$Diff<Props, { sitePaths: SitePaths }>
+	> {
+		displayName = `withSitePaths(${WrappedComponent.displayName || ''})`
+		render() {
+			return (
+				<SitePathsContext.Consumer>
+					{sitePaths => (
+						<WrappedComponent {...this.props} sitePaths={sitePaths} />
+					)}
+				</SitePathsContext.Consumer>
+			)
+		}
+	}
+	return WithSitePaths
+}
--- a/source/engine/mecanismViews/common.js
+++ b/source/engine/mecanismViews/common.js
@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import withLanguage from 'Components/utils/withLanguage'
-import { contains } from 'ramda'
+import withSitePaths from 'Components/utils/withSitePaths'
+import { compose, contains } from 'ramda'
 import React, { Component } from 'react'
 import { Trans } from 'react-i18next'
 import { connect } from 'react-redux'
@ -80,17 +81,33 @@ export function InlineMecanism({ name }) {
 }

 // Un élément du graphe de calcul qui a une valeur interprétée (à afficher)
-export const Leaf = connect(state => ({ flatRules: flatRulesSelector(state) }))(
+export const Leaf = compose(
+	withSitePaths,
+	connect(state => ({ flatRules: flatRulesSelector(state) }))
+)(
 	class Leaf extends Component {
 		render() {
-			let { classes, dottedName, name, value, flatRules, filter } = this.props,
+			let {
+					classes,
+					dottedName,
+					name,
+					value,
+					flatRules,
+					filter,
+					sitePaths
+				} = this.props,
 				rule = findRuleByDottedName(flatRules, dottedName)

 			return (
 				<span className={classNames(classes, 'leaf')}>
 					{dottedName && (
 						<span className="nodeHead">
-							<Link to={'../règle/' + encodeRuleName(dottedName)}>
+							<Link
+								to={
+									sitePaths.documentation.index +
+									'/' +
+									encodeRuleName(dottedName)
+								}>
 								<span className="name">
 									{rule.title || capitalise0(name)} {filter}
 									<NodeValuePointer data={value} />
@ -106,7 +123,7 @@ export const Leaf = connect(state => ({ flatRules: flatRulesSelector(state) }))(

 export function SimpleRuleLink({ rule: { dottedName, title, name } }) {
 	return (
-		<Link to={'../règle/' + encodeRuleName(dottedName)}>
+		<Link to={encodeRuleName(dottedName)}>
 			<span className="name">{title || capitalise0(name)}</span>
 		</Link>
 	)
--- a/source/engine/rules.js
+++ b/source/engine/rules.js
@ -105,9 +105,9 @@ export let nameLeaf = pipe(
 )

 export let encodeRuleName = name =>
-	name.replace(/\s\.\s/g, '--').replace(/\s/g, '-')
+	encodeURI(name.replace(/\s\.\s/g, '/').replace(/\s/g, '-'))
 export let decodeRuleName = name =>
-	name.replace(/--/g, ' . ').replace(/-/g, ' ')
+	decodeURI(name.replace(/\//g, ' . ').replace(/-/g, ' '))

 export let ruleParents = dottedName => {
 	let fragments = splitName(dottedName) // dottedName ex. [CDD . événements . rupture]
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@ -50,7 +50,7 @@ afficher les sources complémentaires: display additional information sources
 input: This rule does not have a formula to compute it. Its value must be supplied through the form.
 Déclenchement: Applicability
 Calcul: Formula
-Chercher une règle: Find a rule
+Chercher dans la documentation: Search the documentation
 Entrez des mots clefs ici: Enter keywords
 noresults: No results
 cliquez pour insérer cette suggestion: click to insert this suggestion
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@ -1318,7 +1318,7 @@

    > C'est donc aussi une mesure de la valeur apportée par le salarié à l'entreprise : l'employeur est prêt à verser cette somme en contrepartie du travail fourni.

-    Des [aides différées](/règle/aides employeur) peuvent venir diminuer ce montant.
+    Des [aides différées](/documentation/aides-employeur) peuvent venir diminuer ce montant.

  formule: rémunération . total sans réduction - réductions de cotisations
  alternative: entreprise . rémunération totale du dirigeant
--- a/source/selectors/analyseSelectors.js
+++ b/source/selectors/analyseSelectors.js
@ -122,7 +122,7 @@ let analyseRule = (parsedRules, ruleDottedName, situationGate) =>
 export let ruleAnalysisSelector = createSelector(
 	[
 		parsedRulesSelector,
-		(_, { dottedName }) => dottedName,
+		(_, props) => props.dottedName,
 		situationsWithDefaultsSelector,
 		state => state.situationBranch || 0
 	],
@ -154,7 +154,7 @@ let exampleSituationSelector = createSelector(
 export let exampleAnalysisSelector = createSelector(
 	[
 		parsedRulesSelector,
-		(_, { dottedName }) => dottedName,
+		(_, props) => props.dottedName,
 		exampleSituationSelector
 	],
 	(rules, dottedName, situation) =>
--- a/source/selectors/companyStatusSelectors.js
+++ b/source/selectors/companyStatusSelectors.js
@ -15,6 +15,7 @@ import {
 	pick,
 	sortBy
 } from 'ramda'
+//TODO : use react context
 import sitePaths from '../sites/mycompanyinfrance.fr/sitePaths'

 const LEGAL_STATUS_DETAILS: {
--- a/source/selectors/regleSelectors.js
+++ b/source/selectors/regleSelectors.js
@ -34,7 +34,7 @@ export const règleLocaliséeSelector = createSelector(
 		}
 		return {
 			nom: localizedRule.titre || localizedRule.nom,
-			lien: 'règle/' + encodeRuleName(dottedName),
+			lien: encodeRuleName(dottedName),

 			id: dottedName,
 			...(localizedRule.shortDescription
--- a/source/sites/embauche.gouv.fr/pages/RulesList.js
+++ b/source/sites/embauche.gouv.fr/pages/RulesList.js
@ -1,5 +1,5 @@
+import { Component, React, T } from 'Components'
 import SearchBar from 'Components/SearchBar'
-import { React, Component, T } from 'Components'
 import { connect } from 'react-redux'
 import 'react-select/dist/react-select.css'
 import { flatRulesSelector } from 'Selectors/analyseSelectors'
@ -16,11 +16,7 @@ export default connect(state => ({
 					<h1>
 						<T>Explorez notre base de règles</T>
 					</h1>
-					<SearchBar
-						showDefaultList={true}
-						rules={flatRules}
-						rulePagesBasePath="règle"
-					/>
+					<SearchBar showDefaultList={true} rules={flatRules} />
 				</div>
 			)
 		}
--- a/source/sites/mycompanyinfrance.fr/App.js
+++ b/source/sites/mycompanyinfrance.fr/App.js
@ -1,5 +1,8 @@
+import RulePage from 'Components/RulePage'
 import TrackPageView from 'Components/utils/TrackPageView'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { defaultTracker } from 'Components/utils/withTracker'
+import { compose } from 'ramda'
 import createRavenMiddleware from 'raven-for-redux'
 import Raven from 'raven-js'
 import React, { Component } from 'react'
@ -7,6 +10,10 @@ import { withNamespaces } from 'react-i18next'
 import { Route, Switch } from 'react-router-dom'
 import 'Ui/index.css'
 import Provider from '../../Provider'
+import {
+	persistEverything,
+	retrievePersistedState
+} from '../../storage/persistEverything'
 import ReactPiwik from '../../Tracker'
 import './App.css'
 import Footer from './layout/Footer/Footer'
@ -47,13 +54,16 @@ class InFranceRoute extends Component {
 		}
 	}
 	render() {
+		const paths = sitePaths()
 		return (
 			<Provider
 				basename={this.props.basename}
 				language={this.props.language}
 				tracker={tracker}
+				sitePaths={paths}
 				reduxMiddlewares={middlewares}
-				initialStore={{ lang: 'en' }}>
+				onStoreCreated={persistEverything}
+				initialStore={retrievePersistedState()}>
 				<TrackPageView />
 				<div id="content">
 					<RouterSwitch />
@ -63,8 +73,10 @@ class InFranceRoute extends Component {
 	}
 }

-let RouterSwitch = withNamespaces()(() => {
-	const paths = sitePaths()
+let RouterSwitch = compose(
+	withNamespaces(),
+	withSitePaths
+)(({ sitePaths }) => {
 	return (
 		<Switch>
 			<Route exact path="/" component={Landing} />
@ -76,15 +88,19 @@ let RouterSwitch = withNamespaces()(() => {
 					<div
 						className="ui__ container"
 						style={{ flexGrow: 1, flexShrink: 0 }}>
-						<Route path={paths.entreprise.index} component={CompanyIndex} />
+						<Route path={sitePaths.entreprise.index} component={CompanyIndex} />
 						<Route
-							path={paths.sécuritéSociale.index}
+							path={sitePaths.sécuritéSociale.index}
 							component={SocialSecurity}
 						/>
 						<Route
-							path={paths.démarcheEmbauche.index}
+							path={sitePaths.démarcheEmbauche.index}
 							component={HiringProcess}
 						/>
+						<Route
+							path={sitePaths.documentation.index + '/:name+'}
+							component={RulePage}
+						/>
 						{process.env.NODE_ENV !== 'production' && (
 							<Route exact path="/sitemap" component={Sitemap} />
 						)}
--- a/source/sites/mycompanyinfrance.fr/layout/Navigation/Navigation.js
+++ b/source/sites/mycompanyinfrance.fr/layout/Navigation/Navigation.js
@ -1,5 +1,6 @@
 /* @flow */
 import { React, T } from 'Components'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import emoji from 'react-easy-emoji'
 import { withNamespaces } from 'react-i18next'
@ -9,10 +10,10 @@ import selectors from 'Selectors/progressSelectors'
 import companySvg from '../../images/company.svg'
 import estimateSvg from '../../images/estimate.svg'
 import hiringSvg from '../../images/hiring.svg'
-import sitePaths from '../../sitePaths'
 import './Navigation.css'
 import NavOpener from './NavOpener'
 import SideBar from './SideBar'
+
 import type { TFunction } from 'react-i18next'

 const Progress = ({ percent }) => (
@ -28,6 +29,7 @@ const Progress = ({ percent }) => (
 type Props = {
 	companyProgress: number,
 	estimationProgress: number,
+	sitePaths: Object,
 	hiringProgress: number,
 	companyStatusChoice: string,
 	t: TFunction
@ -37,6 +39,7 @@ const StepsHeader = ({
 	t,
 	estimationProgress,
 	hiringProgress,
+	sitePaths,
 	companyStatusChoice
 }: Props) => (
 	<SideBar>
@ -45,7 +48,7 @@ const StepsHeader = ({
 				<ul>
 					<li>
 						<NavOpener
-							to={sitePaths().entreprise.index}
+							to={sitePaths.entreprise.index}
 							exact={false}
 							title={
 								<>
@ -63,13 +66,13 @@ const StepsHeader = ({
 										<ul>
 											<li>
 												<NavOpener
-													to={sitePaths().entreprise.statusJuridique}
+													to={sitePaths.entreprise.statusJuridique}
 													title={t('Guide du statut juridique')}>
 													<ul>
 														<li>
 															<NavLink
 																to={
-																	sitePaths().entreprise.statusJuridique
+																	sitePaths.entreprise.statusJuridique
 																		.multipleAssociates
 																}>
 																<T k="associés.titre">Nombre d'associés</T>
@ -78,7 +81,7 @@ const StepsHeader = ({
 														<li>
 															<NavLink
 																to={
-																	sitePaths().entreprise.statusJuridique
+																	sitePaths.entreprise.statusJuridique
 																		.directorStatus
 																}>
 																<T k="statut du dirigeant.titre">
@ -89,8 +92,7 @@ const StepsHeader = ({
 														<li>
 															<NavLink
 																to={
-																	sitePaths().entreprise.statusJuridique
-																		.liability
+																	sitePaths.entreprise.statusJuridique.liability
 																}>
 																<T k="responsabilité.titre">Responsabilité</T>
 															</NavLink>
@ -98,7 +100,7 @@ const StepsHeader = ({
 														<li>
 															<NavLink
 																to={
-																	sitePaths().entreprise.statusJuridique
+																	sitePaths.entreprise.statusJuridique
 																		.minorityDirector
 																}>
 																<T k="gérant minoritaire.titre">
@ -109,7 +111,7 @@ const StepsHeader = ({
 														<li>
 															<NavLink
 																to={
-																	sitePaths().entreprise.statusJuridique
+																	sitePaths.entreprise.statusJuridique
 																		.microEnterprise
 																}>
 																<T k="microentreprise.titre">
@ -119,9 +121,7 @@ const StepsHeader = ({
 														</li>
 														<li>
 															<NavLink
-																to={
-																	sitePaths().entreprise.statusJuridique.liste
-																}>
+																to={sitePaths.entreprise.statusJuridique.liste}>
 																<T>Liste des statuts</T>
 															</NavLink>
 														</li>
@ -133,62 +133,56 @@ const StepsHeader = ({
 												<NavOpener
 													to={
 														companyStatusChoice
-															? sitePaths().entreprise.créer(
-																	companyStatusChoice
-															  )
+															? sitePaths.entreprise.créer(companyStatusChoice)
 															: null
 													}
 													title={t('Démarches de création')}>
 													<ul>
 														<li>
 															<NavLink
-																to={sitePaths().entreprise.créer(
+																to={sitePaths.entreprise.créer(
 																	'micro-entreprise'
 																)}>
 																<T>Micro-entreprise</T>
 															</NavLink>
 														</li>
 														<li>
-															<NavLink to={sitePaths().entreprise.créer('EI')}>
+															<NavLink to={sitePaths.entreprise.créer('EI')}>
 																EI
 															</NavLink>
 														</li>
 														<li>
-															<NavLink
-																to={sitePaths().entreprise.créer('EIRL')}>
+															<NavLink to={sitePaths.entreprise.créer('EIRL')}>
 																EIRL
 															</NavLink>
 														</li>
 														<li>
-															<NavLink
-																to={sitePaths().entreprise.créer('EURL')}>
+															<NavLink to={sitePaths.entreprise.créer('EURL')}>
 																EURL
 															</NavLink>
 														</li>
 														<li>
-															<NavLink to={sitePaths().entreprise.créer('SA')}>
+															<NavLink to={sitePaths.entreprise.créer('SA')}>
 																SA
 															</NavLink>
 														</li>
 														<li>
-															<NavLink
-																to={sitePaths().entreprise.créer('SARL')}>
+															<NavLink to={sitePaths.entreprise.créer('SARL')}>
 																SARL
 															</NavLink>
 														</li>
 														<li>
-															<NavLink to={sitePaths().entreprise.créer('SAS')}>
+															<NavLink to={sitePaths.entreprise.créer('SAS')}>
 																SAS
 															</NavLink>
 														</li>
 														<li>
-															<NavLink
-																to={sitePaths().entreprise.créer('SASU')}>
+															<NavLink to={sitePaths.entreprise.créer('SASU')}>
 																SASU
 															</NavLink>
 														</li>
 														<li>
-															<NavLink to={sitePaths().entreprise.créer('SNC')}>
+															<NavLink to={sitePaths.entreprise.créer('SNC')}>
 																SNC
 															</NavLink>
 														</li>
@ -196,7 +190,7 @@ const StepsHeader = ({
 												</NavOpener>
 											</li>
 											<li>
-												<NavLink to={sitePaths().entreprise.après}>
+												<NavLink to={sitePaths.entreprise.après}>
 													<T k="entreprise.tâches.ensuite">Après la création</T>
 												</NavLink>
 											</li>
@ -204,7 +198,7 @@ const StepsHeader = ({
 									</NavOpener>
 								</li>
 								<li>
-									<NavLink to={sitePaths().entreprise.trouver}>
+									<NavLink to={sitePaths.entreprise.trouver}>
 										<T k="trouver.titre">Retrouver votre entreprise</T>
 									</NavLink>
 								</li>
@ -212,7 +206,7 @@ const StepsHeader = ({
 						</NavOpener>
 					</li>
 					<li>
-						<NavLink exact to={sitePaths().sécuritéSociale.index}>
+						<NavLink exact to={sitePaths.sécuritéSociale.index}>
 							<T>Protection sociale</T>
 							<img
 								style={{ height: '2.5rem', marginBottom: '-0.8rem' }}
@ -223,7 +217,7 @@ const StepsHeader = ({
 						</NavLink>
 					</li>
 					<li>
-						<NavLink to={sitePaths().démarcheEmbauche.index}>
+						<NavLink to={sitePaths.démarcheEmbauche.index}>
 							<T>Embauche</T>
 							<img
 								style={{ height: '2.5rem', marginBottom: '-0.8rem' }}
@ -242,6 +236,7 @@ const StepsHeader = ({
 export default compose(
 	withRouter,
 	withNamespaces(),
+	withSitePaths,
 	connect(
 		state => ({
 			...selectors(state),
--- a/source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js
+++ b/source/sites/mycompanyinfrance.fr/layout/ProgressHeader/ProgressHeader.js
@ -1,6 +1,7 @@
 /* @flow */

 import { React, T } from 'Components'
+import withSitePaths from 'Components/utils/withSitePaths'
 import withTracker from 'Components/utils/withTracker'
 import { compose } from 'ramda'
 import { withNamespaces } from 'react-i18next'
@ -10,8 +11,8 @@ import selectors from 'Selectors/progressSelectors'
 import companySvg from '../../images/company.svg'
 import estimateSvg from '../../images/estimate.svg'
 import hiringSvg from '../../images/hiring.svg'
-import sitePaths from '../../sitePaths'
 import './ProgressHeader.css'
+
 import type { Tracker } from 'Components/utils/withTracker'

 const Progress = ({ percent }) => (
@ -28,18 +29,20 @@ type Props = {
 	companyProgress: number,
 	estimationProgress: number,
 	hiringProgress: number,
-	tracker: Tracker
+	tracker: Tracker,
+	sitePaths: Object
 }
 const StepsHeader = ({
 	companyProgress,
 	estimationProgress,
 	hiringProgress,
-	tracker
+	tracker,
+	sitePaths
 }: Props) => (
 	<header className="steps-header">
 		<nav className="ui__ container">
 			<NavLink
-				to={sitePaths().entreprise.index}
+				to={sitePaths.entreprise.index}
 				activeClassName="active"
 				onClick={() =>
 					tracker.push(['trackEvent', 'Header', 'click', 'Your company'])
@ -51,7 +54,7 @@ const StepsHeader = ({
 				<Progress percent={companyProgress} />
 			</NavLink>
 			<NavLink
-				to={sitePaths().sécuritéSociale.index}
+				to={sitePaths.sécuritéSociale.index}
 				activeClassName="active"
 				onClick={() =>
 					tracker.push(['trackEvent', 'Header', 'click', 'Social security'])
@ -64,7 +67,7 @@ const StepsHeader = ({
 				<Progress percent={estimationProgress} />
 			</NavLink>
 			<NavLink
-				to={sitePaths().démarcheEmbauche.index}
+				to={sitePaths.démarcheEmbauche.index}
 				activeClassName="active"
 				onClick={() =>
 					tracker.push(['trackEvent', 'Header', 'click', 'Hiring process'])
@ -87,5 +90,6 @@ export default compose(
 		selectors,
 		{}
 	),
-	withNamespaces()
+	withNamespaces(),
+	withSitePaths
 )(StepsHeader)
--- a/source/sites/mycompanyinfrance.fr/pages/Company/AfterRegistration.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/AfterRegistration.js
@ -1,21 +1,22 @@
 /* @flow */
 import { React, T } from 'Components'
 import { ScrollToTop } from 'Components/utils/Scroll'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
-import sitePaths from '../../sitePaths'
 import siret from './siret.jpg'
 import type { TFunction } from 'react-i18next'

 type Props = {
 	companyStatusChoice: string,
+	sitePaths: Object,
 	t: TFunction
 }

-const AfterRegistration = ({ t, companyStatusChoice }: Props) => (
+const AfterRegistration = ({ t, companyStatusChoice, sitePaths }: Props) => (
 	<Animate.fromBottom>
 		<ScrollToTop />
 		<h1>
@ -91,10 +92,10 @@ const AfterRegistration = ({ t, companyStatusChoice }: Props) => (
 			</>
 		)}
 		<p style={{ display: 'flex', justifyContent: 'space-between' }}>
-			<Link to={sitePaths().entreprise.index} className="ui__ skip-button left">
+			<Link to={sitePaths.entreprise.index} className="ui__ skip-button left">
 				‹ <T k="après.actions.retour">Démarche de création</T>
 			</Link>
-			<Link to={sitePaths().sécuritéSociale.index} className="ui__ skip-button">
+			<Link to={sitePaths.sécuritéSociale.index} className="ui__ skip-button">
 				<T k="après.actions.avance">Estimez vos cotisations </T>›
 			</Link>
 		</p>
@ -105,5 +106,6 @@ export default compose(
 	connect(state => ({
 		companyStatusChoice: state.inFranceApp.companyStatusChoice
 	})),
-	withNamespaces()
+	withNamespaces(),
+	withSitePaths
 )(AfterRegistration)
--- a/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/CreationChecklist.js
@ -12,8 +12,10 @@ import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import * as Animate from 'Ui/animate'
+import withSitePaths from 'Components/utils/withSitePaths'
+
 import { CheckItem, Checklist } from 'Ui/Checklist'
-import sitePaths, { LANDING_LEGAL_STATUS_LIST } from '../../sitePaths'
+import { LANDING_LEGAL_STATUS_LIST } from '../../sitePaths'
 import Page404 from '../404'
 import StatusDescription from './StatusDescription'
 import type { Match } from 'react-router'
@ -24,6 +26,7 @@ type Props = {
 	match: Match,
 	onChecklistInitialization: (string, Array<string>) => void,
 	onStatusChange: () => void,
+	sitePaths: Object,
 	onItemCheck: (name: string, checked: boolean) => void,
 	t: TFunction,
 	companyCreationChecklist: { [string]: boolean }
@ -34,6 +37,7 @@ const CreateCompany = ({
 	statusChooserCompleted,
 	onChecklistInitialization,
 	onItemCheck,
+	sitePaths,
 	companyCreationChecklist,
 	onStatusChange,
 	t
@ -422,7 +426,7 @@ const CreateCompany = ({
 				<button onClick={onStatusChange} className="ui__ skip-button left">
 					‹ <T k="entreprise.tâches.retour">Choisir un autre statut</T>
 				</button>
-				<Link to={sitePaths().entreprise.après} className="ui__ skip-button">
+				<Link to={sitePaths.entreprise.après} className="ui__ skip-button">
 					<T k="entreprise.tâches.ensuite">Après la création</T>›
 				</Link>
 			</p>
@ -431,6 +435,7 @@ const CreateCompany = ({
 }
 export default compose(
 	withNamespaces(),
+	withSitePaths,
 	connect(
 		state => ({
 			companyCreationChecklist: state.inFranceApp.companyCreationChecklist,
--- a/source/sites/mycompanyinfrance.fr/pages/Company/Find.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/Find.js
@ -1,23 +1,23 @@
 /* @flow */
 import { saveExistingCompanyDetails } from 'Actions/existingCompanyActions'
 import { React, T } from 'Components'
+// $FlowFixMe
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router'
 import { Link } from 'react-router-dom'
-// $FlowFixMe
 import ReactSelect from 'react-select'
 // $FlowFixMe
 import 'react-select/dist/react-select.css'
-import sitePaths from '../../sitePaths'
 import './Find.css'
 import { CompanyDetails as Company } from './YourCompany'
 import type { RouterHistory } from 'react-router'

-const goToNextStep = (history: RouterHistory) => {
-	history.push(sitePaths().sécuritéSociale.index)
+const goToNextStep = (history: RouterHistory, sitePaths: Object) => {
+	history.push(sitePaths.sécuritéSociale.index)
 }

 type State = {
@ -52,7 +52,7 @@ class Search extends React.Component<Props, State> {
 			})

 	render() {
-		let { t } = this.props
+		let { t, sitePaths } = this.props
 		return (
 			<div id="findYourCompany">
 				<Helmet>
@ -69,7 +69,7 @@ class Search extends React.Component<Props, State> {
 					<T k="trouver.titre">Retrouver votre entreprise</T>
 				</h1>
 				<p>
-					<Link to={sitePaths().entreprise.index}>
+					<Link to={sitePaths.entreprise.index}>
 						<T k="trouver.non">Je n'ai pas encore d'entreprise</T>
 					</Link>
 				</p>
@ -101,7 +101,7 @@ class Search extends React.Component<Props, State> {
 						<button
 							onClick={() => {
 								this.props.onCompanyDetailsConfirmation(this.state.input)
-								goToNextStep(this.props.history)
+								goToNextStep(this.props.history, sitePaths)
 							}}
 							className="ui__ button">
 							<T k="trouver.ok">Confirmer et simuler un salaire</T>
@ -115,6 +115,7 @@ class Search extends React.Component<Props, State> {

 export default compose(
 	withRouter,
+	withSitePaths,
 	connect(
 		null,
 		{
--- a/source/sites/mycompanyinfrance.fr/pages/Company/Home.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/Home.js
@ -1,14 +1,15 @@
 /* @flow */
 import { resetCompanyStatusChoice } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose, toPairs } from 'ramda'
 import Helmet from 'react-helmet'
 import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
 import { nextQuestionUrlSelector } from 'Selectors/companyStatusSelectors'
-import sitePaths from '../../sitePaths'
 import PreviousAnswers from './PreviousAnswers'
+
 import type { TFunction } from 'react-i18next'

 import type { Match, Location } from 'react-router'
@ -19,10 +20,12 @@ type Props = {
 	guideAlreadyStarted: boolean,
 	resetCompanyStatusChoice: (?string) => void,
 	t: TFunction,
-	location: Location
+	location: Location,
+	sitePaths: Object
 }
 const CreateMyCompany = ({
 	match,
+	sitePaths,
 	nextQuestionUrl,
 	guideAlreadyStarted,
 	resetCompanyStatusChoice,
@ -31,7 +34,7 @@ const CreateMyCompany = ({
 }: Props) => {
 	if (!match.isExact) {
 		const companyStatusCurrentQuestionName = (toPairs(
-			sitePaths().entreprise.statusJuridique
+			sitePaths.entreprise.statusJuridique
 		).find(([, pathname]) => location.pathname === pathname) || [])[0]
 		resetCompanyStatusChoice(companyStatusCurrentQuestionName)
 	}
@ -75,7 +78,7 @@ const CreateMyCompany = ({
 							{!guideAlreadyStarted ? <T>Commencer</T> : <T>Reprendre</T>}
 						</Link>
 						<Link
-							to={sitePaths().sécuritéSociale.index}
+							to={sitePaths.sécuritéSociale.index}
 							className="ui__ skip-button">
 							<T>Plus tard</T> ›
 						</Link>
@ -96,5 +99,6 @@ export default compose(
 		}),
 		{ resetCompanyStatusChoice }
 	),
+	withSitePaths,
 	withNamespaces()
 )(CreateMyCompany)
--- a/source/sites/mycompanyinfrance.fr/pages/Company/PickLegalStatus.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/PickLegalStatus.js
@ -1,40 +1,39 @@
 /* @flow */
-import { React, T } from 'Components'
-import Helmet from 'react-helmet'
-import { connect } from 'react-redux'
-import { filter } from 'ramda'
-import { Link } from 'react-router-dom'
-import { possibleStatusSelector } from 'Selectors/companyStatusSelectors'
-import { withNamespaces } from 'react-i18next'
-import StatusDescription from './StatusDescription'
+import { goBackToPreviousQuestion } from 'Actions/companyStatusActions';
+import { React, T } from 'Components';
+import withLanguage from 'Components/utils/withLanguage';
+import withSitePaths from 'Components/utils/withSitePaths';
+import { compose, filter } from 'ramda';
+import Helmet from 'react-helmet';
+import { withNamespaces } from 'react-i18next';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { possibleStatusSelector } from 'Selectors/companyStatusSelectors';
+import StatusDescription from './StatusDescription';
 import type { RouterHistory } from 'react-router'
-import { compose } from 'ramda'
 import type { LegalStatus } from 'Selectors/companyStatusSelectors'
-import withLanguage from 'Components/utils/withLanguage'
 import type { TFunction } from 'react-i18next'

-import sitePaths from '../../sitePaths'
-import { goBackToPreviousQuestion } from 'Actions/companyStatusActions'
-
 type Props = {
 	history: RouterHistory,
 	possibleStatus: { [LegalStatus]: boolean },
 	goBackToPreviousQuestion: () => void,
+	sitePaths: Object,
 	setMainStatus: LegalStatus => void,
 	language: string,
 	t: TFunction
 }

-const StatusButton = withNamespaces()(
-	({ status, t }: { status: LegalStatus, t: TFunction }) => (
+const StatusButton = withSitePaths(withNamespaces()(
+	({ status, t, sitePaths }: { status: LegalStatus, t: TFunction, sitePaths: Object }) => (
 		<div style={{textAlign: 'right'}}>

-		<Link to={sitePaths().entreprise.créer(status)} className="ui__ button">
+		<Link to={sitePaths.entreprise.créer(status)} className="ui__ button">
 			<T>Créer une</T> {t(status)}
 		</Link>
 		</div>
 	)
-)
+))
 const StatusTitle = ({ status, language }) =>
 	status === 'EI' ? (
 		<>
@ -85,6 +84,7 @@ const SetMainStatus = ({
 	history,
 	possibleStatus,
 	goBackToPreviousQuestion,
+	sitePaths,
 	t,
 	language
 }: Props) => {
@ -121,7 +121,7 @@ const SetMainStatus = ({
 					‹ <T>Précédent</T>
 				</button>
 				<Link
-					to={sitePaths().sécuritéSociale.index}
+					to={sitePaths.sécuritéSociale.index}
 					className="ui__ skip-button">
 					<T>Choisir plus tard</T> ›
 				</Link>
@ -132,6 +132,7 @@ const SetMainStatus = ({

 export default compose(
 	withNamespaces(),
+	withSitePaths,
 	withLanguage,
 	connect(
 		state => ({ possibleStatus: possibleStatusSelector(state) }),
--- a/source/sites/mycompanyinfrance.fr/pages/Company/PreviousAnswers.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/PreviousAnswers.js
@ -1,11 +1,12 @@
 /* @flow */
 import { goToCompanyStatusChoice } from 'Actions/companyStatusActions'
 import { React, T } from 'Components'
-import { isNil } from 'ramda'
+import withSitePaths from 'Components/utils/withSitePaths'
+import { compose, isNil } from 'ramda'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
-import sitePaths from '../../sitePaths'
+
 import type { LegalStatusRequirements } from 'Types/companyTypes'
 const requirementToText = (key, value) => {
 	switch (key) {
@ -38,6 +39,7 @@ type Props = LegalStatusRequirements & { goToCompanyStatusChoice: () => void }

 const PreviousAnswers = ({
 	goToCompanyStatusChoice,
+	sitePaths,
 	...legalStatus
 }: Props) => {
 	return (
@ -57,7 +59,7 @@ const PreviousAnswers = ({
 								([key, value]) =>
 									!isNil(value) && (
 										<li key={key}>
-											<Link to={sitePaths().entreprise.statusJuridique[key]}>
+											<Link to={sitePaths.entreprise.statusJuridique[key]}>
 												{requirementToText(key, value)}
 											</Link>
 										</li>
@ -71,7 +73,10 @@ const PreviousAnswers = ({
 	)
 }

-export default connect(
-	state => state.inFranceApp.companyLegalStatus,
-	{ goToCompanyStatusChoice }
+export default compose(
+	connect(
+		state => state.inFranceApp.companyLegalStatus,
+		{ goToCompanyStatusChoice }
+	),
+	withSitePaths
 )(PreviousAnswers)
--- a/source/sites/mycompanyinfrance.fr/pages/Company/YourCompany.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/YourCompany.js
@ -2,11 +2,11 @@

 import { React, T } from 'Components'
 import withLanguage from 'Components/utils/withLanguage'
-import { toPairs } from 'ramda'
+import { toPairs, compose } from 'ramda'
 import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
-import sitePaths from '../../sitePaths'
+import withSitePaths from 'Components/utils/withSitePaths'
 import type { ResetExistingCompanyDetailsAction } from 'Types/companyTypes'
 import type { TFunction } from 'react-i18next'

@ -61,27 +61,27 @@ export const CompanyDetails = withNamespaces()(
 	}
 )

-const YourCompany = ({ companyDetails, resetCompanyDetails }) => (
+const YourCompany = ({ companyDetails, resetCompanyDetails, sitePaths }) => (
 	<>
-		{!companyDetails && <Redirect to={sitePaths().entreprise.index} />}
+		{!companyDetails && <Redirect to={sitePaths.entreprise.index} />}
 		<h1>
 			<T>Votre entreprise</T>
 		</h1>
 		<CompanyDetails {...companyDetails.apiDetails} />
 		<p>
-			<Link onClick={resetCompanyDetails} to={sitePaths().entreprise.trouver}>
+			<Link onClick={resetCompanyDetails} to={sitePaths.entreprise.trouver}>
 				<T>Ce n'est pas mon entreprise</T>
 			</Link>
 		</p>
 		<p>
-			<Link to={sitePaths().sécuritéSociale.index} className="ui__ button">
+			<Link to={sitePaths.sécuritéSociale.index} className="ui__ button">
 				<T>Simuler une embauche</T>
 			</Link>
 		</p>
 	</>
 )

-export default connect(
+export default compose(withSitePaths, connect(
 	state => ({
 		companyDetails: state.inFranceApp.existingCompanyDetails
 	}),
@ -91,4 +91,4 @@ export default connect(
 				type: 'RESET_EXISTING_COMPANY_DETAILS'
 			})
 	})
-)(YourCompany)
+))(YourCompany)
--- a/source/sites/mycompanyinfrance.fr/pages/Company/index.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Company/index.js
@ -1,9 +1,10 @@
 import React from 'react'
 import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
+import { compose } from 'ramda'
 import { Redirect, Route, Switch } from 'react-router'
 import * as Animate from 'Ui/animate'
-import sitePaths from '../../sitePaths'
+import withSitePaths from 'Components/utils/withSitePaths'
 import AfterRegistration from './AfterRegistration'
 import CreationChecklist from './CreationChecklist'
 import DefineDirectorStatus from './DirectorStatus'
@ -28,71 +29,72 @@ const CreateMyCompany = ({
 	match,
 	location,
 	companyStatusChoice,
-	existingCompany
+	existingCompany,
+	sitePaths,
 }) => {
-	const paths = sitePaths()
+	
 	return (
 		<>
 			<Animate.fromBottom>
 				<Switch>
 					<Route
-						path={paths.entreprise.votreEntreprise}
+						path={sitePaths.entreprise.votreEntreprise}
 						component={YourCompany}
 					/>
 					<Route
-						path={paths.entreprise.créer(':status')}
+						path={sitePaths.entreprise.créer(':status')}
 						component={CreationChecklist}
 					/>
-					<Route path={paths.entreprise.trouver} component={Find} />
-					<Route path={paths.entreprise.après} component={AfterRegistration} />
+					<Route path={sitePaths.entreprise.trouver} component={Find} />
+					<Route path={sitePaths.entreprise.après} component={AfterRegistration} />
 					<Route
-						path={paths.entreprise.statusJuridique.index}
+						path={sitePaths.entreprise.statusJuridique.index}
 						component={Home}
 					/>
 					{existingCompany && (
 						<Redirect
 							exact
 							from={match.path}
-							to={paths.entreprise.votreEntreprise}
+							to={sitePaths.entreprise.votreEntreprise}
 						/>
 					)}
 					{companyStatusChoice ? (
 						<Redirect
 							exact
 							from={match.path}
-							to={paths.entreprise.créer(companyStatusChoice)}
+							to={sitePaths.entreprise.créer(companyStatusChoice)}
 						/>
 					) : (
 						<Redirect
 							exact
 							from={match.path}
-							to={paths.entreprise.statusJuridique.index}
+							to={sitePaths.entreprise.statusJuridique.index}
 						/>
 					)}
 				</Switch>
 				<Switch location={location}>
 					<Route
-						path={paths.entreprise.statusJuridique.liability}
+						path={sitePaths.entreprise.statusJuridique.liability}
 						component={withAnimation(Liability)}
 					/>
 					<Route
-						path={paths.entreprise.statusJuridique.directorStatus}
+						path={sitePaths.entreprise.statusJuridique.directorStatus}
 						component={withAnimation(DefineDirectorStatus)}
 					/>
 					<Route
-						path={paths.entreprise.statusJuridique.microEnterprise}
+						path={sitePaths.entreprise.statusJuridique.microEnterprise}
 						component={withAnimation(Microenterprise)}
 					/>
 					<Route
-						path={paths.entreprise.statusJuridique.multipleAssociates}
+						path={sitePaths.entreprise.statusJuridique.multipleAssociates}
 						component={withAnimation(NumberOfAssociate)}
 					/>
 					<Route
-						path={paths.entreprise.statusJuridique.minorityDirector}
+						path={sitePaths.entreprise.statusJuridique.minorityDirector}
 						component={withAnimation(MinorityDirector)}
 					/>
 					<Route
-						path={paths.entreprise.statusJuridique.liste}
+						path={sitePaths.entreprise.statusJuridique.liste}
 						component={withAnimation(PickLegalStatus)}
 					/>
 				</Switch>
@ -101,7 +103,11 @@ const CreateMyCompany = ({
 	)
 }

-export default connect(state => ({
-	companyStatusChoice: state.inFranceApp.companyStatusChoice,
-	existingCompany: state.inFranceApp.existingCompanyDetails
-}))(withNamespaces()(CreateMyCompany))
+export default compose(
+	connect(state => ({
+		companyStatusChoice: state.inFranceApp.companyStatusChoice,
+		existingCompany: state.inFranceApp.existingCompanyDetails
+	})),
+	withNamespaces(), 
+	withSitePaths
+)(CreateMyCompany)
--- a/source/sites/mycompanyinfrance.fr/pages/Documentation/index.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Documentation/index.js
--- a/source/sites/mycompanyinfrance.fr/pages/HiringProcess.js
+++ b/source/sites/mycompanyinfrance.fr/pages/HiringProcess.js
@ -4,6 +4,7 @@ import {
 	initializeHiringChecklist
 } from 'Actions/hiringChecklistAction'
 import { React, T } from 'Components'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withNamespaces } from 'react-i18next'
@ -11,10 +12,10 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
 import { CheckItem, Checklist } from 'Ui/Checklist'
-import sitePaths from '../sitePaths'

 const HiringProcess = ({
 	onChecklistInitialization,
+	sitePaths,
 	onItemCheck,
 	hiringChecklist,
 	t
@ -200,7 +201,7 @@ const HiringProcess = ({
 			</ul>
 			<Link
 				className="ui__ button"
-				to={sitePaths().sécuritéSociale.index + '/simulation'}>
+				to={sitePaths.sécuritéSociale.index + '/simulation'}>
 				Obtenir un exemple de fiche de paie
 			</Link>
 		</T>
@ -209,6 +210,7 @@ const HiringProcess = ({

 export default compose(
 	withNamespaces(),
+	withSitePaths,
 	connect(
 		state => ({ hiringChecklist: state.inFranceApp.hiringChecklist }),
 		{
--- a/source/sites/mycompanyinfrance.fr/pages/Landing.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Landing.js
@ -1,75 +1,74 @@
 /* @flow */

 import withColours from 'Components/utils/withColours'
+import withSitePaths from 'Components/utils/withSitePaths'
 import marianneSvg from 'Images/marianne.svg'
 import urssafSvg from 'Images/urssaf.svg'
+import { compose } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
 import { Trans, withNamespaces } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import Animate from 'Ui/animate'
 import Footer from '../layout/Footer/Footer'
-import sitePaths from '../sitePaths'
 import './Landing.css'

-export default withNamespaces()(
-	withColours(({ colours: { colour } }) => (
-		<>
-			<section className="landing__banner" style={{ backgroundColor: colour }}>
-				<header>
-					<h1>
-						<Trans>Mon-entreprise.fr</Trans>
-					</h1>
-					<p className="ui__ lead" style={{ maxWidth: '35rem' }}>
-						<Trans i18nKey="subtitle">
-							Les ressources pour créer et administrer votre activité en toute
-							simplicité.
-						</Trans>
-					</p>
+export default compose(
+	withNamespaces(),
+	withColours,
+	withSitePaths
+)(({ colours: { colour }, sitePaths }) => (
+	<>
+		<section className="landing__banner" style={{ backgroundColor: colour }}>
+			<header>
+				<h1>
+					<Trans>Mon-entreprise.fr</Trans>
+				</h1>
+				<p className="ui__ lead" style={{ maxWidth: '35rem' }}>
+					<Trans i18nKey="subtitle">
+						Les ressources pour créer et administrer votre activité en toute
+						simplicité.
+					</Trans>
+				</p>

-					<svg
-						className="landing__banner__svg white"
-						preserveAspectRatio="none"
-						viewBox="5 0 495 150">
-						<path fill="white" d="M 0 150 Q 150 0 500 0 L 500 150 Z" />
-					</svg>
-				</header>
-			</section>
-			<section className="ui__ container">
-				<div className="landing__header">
-					<img alt="logo marianne" src={marianneSvg} />
-					<img alt="logo urssaf" src={urssafSvg} />
-				</div>
-				<h2 style={{ textAlign: 'center' }}>
-					{emoji('🧭')} Que souhaitez vous faire ?
-				</h2>
-				<Animate.fromBottom>
-					<Link className="landing__choice " to={sitePaths().entreprise.index}>
-						{emoji('💡')} Créer une entreprise
-					</Link>
+				<svg
+					className="landing__banner__svg white"
+					preserveAspectRatio="none"
+					viewBox="5 0 495 150">
+					<path fill="white" d="M 0 150 Q 150 0 500 0 L 500 150 Z" />
+				</svg>
+			</header>
+		</section>
+		<section className="ui__ container">
+			<div className="landing__header">
+				<img alt="logo marianne" src={marianneSvg} />
+				<img alt="logo urssaf" src={urssafSvg} />
+			</div>
+			<h2 style={{ textAlign: 'center' }}>
+				{emoji('🧭')} Que souhaitez vous faire ?
+			</h2>
+			<Animate.fromBottom>
+				<Link className="landing__choice " to={sitePaths.entreprise.index}>
+					{emoji('💡')} Créer une entreprise
+				</Link>

-					<Link
-						className="landing__choice "
-						to={sitePaths().sécuritéSociale.index}>
-						{emoji('💶')} Estimer les cotisations et les taxes
-					</Link>
+				<Link className="landing__choice " to={sitePaths.sécuritéSociale.index}>
+					{emoji('💶')} Estimer les cotisations et les taxes
+				</Link>

-					<Link
-						className="landing__choice"
-						to={sitePaths().démarcheEmbauche.index}>
-						{emoji('🤝')} Connaître les démarches d'embauche
-					</Link>
-					<Link className="landing__choice landing__choice--soon" to={'/'}>
-						{emoji('🏡')} Déclarer mon activité d'économie collaborative
-					</Link>
+				<Link className="landing__choice" to={sitePaths.démarcheEmbauche.index}>
+					{emoji('🤝')} Connaître les démarches d'embauche
+				</Link>
+				<Link className="landing__choice landing__choice--soon" to={'/'}>
+					{emoji('🏡')} Déclarer mon activité d'économie collaborative
+				</Link>

-					<Link className="landing__choice landing__choice--soon" to={'/'}>
-						{emoji('🌍')} Démarrer une activité en France en tant
-						qu'entrepreneur étranger
-					</Link>
-				</Animate.fromBottom>
-			</section>
-			<Footer />
-		</>
-	))
-)
+				<Link className="landing__choice landing__choice--soon" to={'/'}>
+					{emoji('🌍')} Démarrer une activité en France en tant qu'entrepreneur
+					étranger
+				</Link>
+			</Animate.fromBottom>
+		</section>
+		<Footer />
+	</>
+))
--- a/source/sites/mycompanyinfrance.fr/pages/Sitemap.js
+++ b/source/sites/mycompanyinfrance.fr/pages/Sitemap.js
@ -1,17 +1,21 @@
+import withSitePaths from 'Components/utils/withSitePaths'
 import React from 'react'
-import sitePaths, { generateSiteMap } from '../sitePaths'
-const SiteMap = () => (
+import { generateSiteMap } from '../sitePaths'
+
+const SiteMap = ({ sitePaths }) => (
 	<>
 		<h1>Sitemap</h1>
 		<pre>
-			{generateSiteMap(sitePaths()).map(path => (
-				<span key={path}>
-					{path}
-					<br />
-				</span>
-			))}
+			{generateSiteMap(
+				sitePaths.map(path => (
+					<span key={path}>
+						{path}
+						<br />
+					</span>
+				))
+			)}
 		</pre>
 	</>
 )

-export default SiteMap
+export default withSitePaths(SiteMap)
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/Home.js
@ -3,6 +3,7 @@
 import { Component, React, T } from 'Components'
 import { ScrollToTop } from 'Components/utils/Scroll'
 import withLanguage from 'Components/utils/withLanguage'
+import withSitePaths from 'Components/utils/withSitePaths'
 import { compose } from 'ramda'
 import Helmet from 'react-helmet'
 import { withNamespaces } from 'react-i18next'
@ -10,8 +11,8 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { régimeSelector } from 'Selectors/companyStatusSelectors'
 import * as Animate from 'Ui/animate'
-import sitePaths from '../../sitePaths'
 import Video from './Video'
+
 import type { Match, Location } from 'react-router'
 import type { TFunction } from 'react-i18next'

@ -20,27 +21,23 @@ type Props = {
 	location: Location,
 	t: TFunction,
 	régime: 'indépendant' | 'assimilé-salarié' | 'micro-entreprise' | null,
+	sitePaths: Object,
 	language: string
 }
 class SocialSecurity extends Component<Props, {}> {
 	render() {
+		const { t, match, régime, sitePaths } = this.props
 		return (
 			<>
 				<Helmet>
 					<title>
-						{this.props.t(
-							'sécu.page.titre',
-							"Sécurité sociale et coût d'embauche"
-						)}
+						{t('sécu.page.titre', "Sécurité sociale et coût d'embauche")}
 					</title>
-					<meta
-						name="description"
-						content={this.props.t('sécu.page.description')}
-					/>
+					<meta name="description" content={t('sécu.page.description')} />
 				</Helmet>
 				<ScrollToTop />
 				<Animate.fromBottom>
-					{this.props.match.isExact && (
+					{match.isExact && (
 						<>
 							<T k="sécu.content">
 								<h1>Protection sociale : coûts et avantages</h1>
@ -64,15 +61,15 @@ class SocialSecurity extends Component<Props, {}> {
 								<Link
 									className="ui__ button"
 									to={
-										this.props.régime
-											? sitePaths().sécuritéSociale[this.props.régime]
-											: sitePaths().sécuritéSociale.comparaison
+										régime
+											? sitePaths.sécuritéSociale[régime]
+											: sitePaths.sécuritéSociale.comparaison
 									}>
 									<T>La rémunération du dirigeant</T>
 								</Link>
 								<Link
 									className="ui__ button"
-									to={sitePaths().sécuritéSociale.salarié}>
+									to={sitePaths.sécuritéSociale.salarié}>
 									<T>Le salaire d'un employé</T>
 								</Link>
 							</div>
@ -87,6 +84,7 @@ class SocialSecurity extends Component<Props, {}> {
 export default compose(
 	withNamespaces(),
 	withLanguage,
+	withSitePaths,
 	connect(state => ({
 		régime: régimeSelector(state)
 	}))
--- a/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/index.js
+++ b/source/sites/mycompanyinfrance.fr/pages/SocialSecurity/index.js
@ -1,8 +1,7 @@
-import RulePage from 'Components/RulePage'
 import { ScrollToTop } from 'Components/utils/Scroll'
+import withSitePaths from 'Components/utils/withSitePaths'
 import React from 'react'
 import { Route, Switch } from 'react-router'
-import sitePaths from '../../sitePaths'
 import AssimiléSalarié from './AssimiléSalarié'
 import Home from './Home'
 import Indépendant from './Indépendant'
@ -10,37 +9,30 @@ import MicroEntreprise from './MicroEntreprise'
 import Salarié from './Salarié'
 import SchemeComparaison from './SchemeComparaison'

-const SocialSecurityRoutes = () => {
-	const paths = sitePaths()
-	return (
-		<>
-			<ScrollToTop />
-			<Switch>
-				<Route exact path={paths.sécuritéSociale.index} component={Home} />
-				<Route
-					path={paths.sécuritéSociale.index + '/règle/:name'}
-					component={RulePage}
-				/>
-				<Route path={paths.sécuritéSociale.salarié} component={Salarié} />
-				<Route
-					path={paths.sécuritéSociale.comparaison}
-					component={SchemeComparaison}
-				/>
-				<Route
-					path={paths.sécuritéSociale['assimilé-salarié']}
-					component={AssimiléSalarié}
-				/>
-				<Route
-					path={paths.sécuritéSociale.indépendant}
-					component={Indépendant}
-				/>
-				<Route
-					path={paths.sécuritéSociale['micro-entreprise']}
-					component={MicroEntreprise}
-				/>
-			</Switch>
-		</>
-	)
-}
+const SocialSecurityRoutes = ({ sitePaths }) => (
+	<>
+		<ScrollToTop />
+		<Switch>
+			<Route exact path={sitePaths.sécuritéSociale.index} component={Home} />
+			<Route path={sitePaths.sécuritéSociale.salarié} component={Salarié} />
+			<Route
+				path={sitePaths.sécuritéSociale.comparaison}
+				component={SchemeComparaison}
+			/>
+			<Route
+				path={sitePaths.sécuritéSociale['assimilé-salarié']}
+				component={AssimiléSalarié}
+			/>
+			<Route
+				path={sitePaths.sécuritéSociale.indépendant}
+				component={Indépendant}
+			/>
+			<Route
+				path={sitePaths.sécuritéSociale['micro-entreprise']}
+				component={MicroEntreprise}
+			/>
+		</Switch>
+	</>
+)

-export default SocialSecurityRoutes
+export default withSitePaths(SocialSecurityRoutes)