AuthUser.tsx

import React, { FC } from 'react';
import Container from '@material-ui/core/Container';
import { Route, useRouteMatch } from 'react-router-dom';
import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';
import { ChoseRole } from 'components/AuthUser/ChoseRole/ChoseRole';
import { RestrictedRoute } from 'components/RestrictedRoute/RestrictedRoute';

export const AuthUser: FC = () => {
  const { path } = useRouteMatch();
  return (
    <Container maxWidth="sm">
      <RestrictedRoute
        path={`${path}${NonAuthRoutes.signIn}`}
        Component={SignInForm}
      />
      <Route path={`${path}${NonAuthRoutes.signUp}`} component={SignUpForm} />
      <Route path={`${path}${AuthRoutes.choseRole}`} component={ChoseRole} />
    </Container>
  );
};