Router.tsx

import React, { useContext } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
import { UserContext } from '../../hooks/userContext'
import Consents from '../Consents/Consents'
import Login from '../Login/Login'
import Newsletter from '../Newsletter/Newsletter'
import Popups from '../Popups/Popups'
import Prices from '../Prices/Prices'

const links: { [key: string]: { label: string; path: string } } = {
  newsletter: {
    label: 'Newsletter',
    path: '/newsletter',
  },
  popups: {
    label: 'Pop-ups',
    path: '/popups',
  },
  prices: {
    label: 'Prix',
    path: '/prices',
  },
  consents: {
    label: 'Consentements',
    path: '/consents',
  },
}

export const routes = Object.keys(links).map((key) => ({
  label: links[key].label,
  path: links[key].path,
}))

const Router: React.FC = () => {
  const { user } = useContext(UserContext)

  return (
    <Switch>
      {user ? (
        <>
          <Route exact path={links.newsletter.path} component={Newsletter} />
          <Route exact path={links.prices.path} component={Prices} />
          <Route exact path={links.popups.path} component={Popups} />
          <Route exact path={links.consents.path} component={Consents} />
          <Redirect path="*" to={links.newsletter.path} />
        </>
      ) : (
        <>
          <Route path="/login" component={Login} />
          <Redirect path="*" to="/login" />
        </>
      )}
    </Switch>
  )
}

export default Router