Routes.tsx

import React, { Suspense, lazy } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import { FluidType } from 'enum/fluid.enum'
import ChallengeView from 'components/Challenge/ChallengeView'
import DuelView from 'components/Duel/DuelView'
import QuizView from 'components/Quiz/QuizView'
import ExplorationView from 'components/Exploration/ExplorationView'
import ActionView from 'components/Action/ActionView'

const HomeView = lazy(() => import('components/Home/HomeView'))
const SingleFluidView = lazy(() =>
  import('components/SingleFluid/SingleFluidView')
)

const EcogestureView = lazy(() =>
  import('components/Ecogesture/EcogestureView')
)
const OptionsView = lazy(() => import('components/Options/OptionsView'))
const FAQView = lazy(() => import('components/FAQ/FAQView'))
const LegalNoticeView = lazy(() =>
  import('components/LegalNotice/LegalNoticeView')
)
const GCUView = lazy(() => import('components/GCU/GCUView'))
const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
const ProfileTypeView = lazy(() =>
  import('components/ProfileType/ProfileTypeView')
)

const Routes = () => {
  return (
    <Suspense fallback={<div></div>}>
      <Switch>
        <Route
          path="/consumption"
          render={({ match: { url } }) => (
            <>
              <Route
                path={`${url}/electricité`}
                component={() => (
                  <SingleFluidView fluidType={FluidType.ELECTRICITY} />
                )}
              />
              <Route
                path={`${url}/eau`}
                component={() => (
                  <SingleFluidView fluidType={FluidType.WATER} />
                )}
              />
              <Route
                path={`${url}/gaz`}
                component={() => <SingleFluidView fluidType={FluidType.GAS} />}
              />
              <Route path={`${url}/`} component={HomeView} exact />
            </>
          )}
        />
        <Route
          path="/challenges"
          render={({ match: { url } }) => (
            <>
              <Route path={`${url}/duel`} component={DuelView} />
              <Route path={`${url}/quiz`} component={QuizView} />
              <Route path={`${url}/exploration`} component={ExplorationView} />
              <Route path={`${url}/action`} exact component={ActionView} />
              <Route path={`${url}/`} component={ChallengeView} exact />
            </>
          )}
        />
        <Route path="/ecogestures" component={EcogestureView} />
        <Route path={'/options/FAQ'} component={FAQView} />
        <Route path={`/options/legalnotice`} component={LegalNoticeView} />
        <Route path={`/options/gcu`} component={GCUView} />
        <Route path={'/options/:connectParam'} exact component={OptionsView} />
        <Route path={'/options'} exact component={OptionsView} />
        <Route path="/analysis" component={AnalysisView} />
        <Route path="/profiletype" component={ProfileTypeView} />
        <Redirect from="/" to="/consumption" />
        <Redirect from="*" to="/consumption" />
      </Switch>
    </Suspense>
  )
}

export default Routes