Props and PrivateRoute implementation using react-document-title, auth-hook ~> https://gist.github.com/ulises-jeremias/a27b85e3eea083278188f24de955989b

AppRoutes.jsx

import React from 'react';
import { Switch, Redirect } from 'react-router-dom';
import { PropsRoute as Route } from './PropsRoute';
import { PrivateRoute } from './PrivateRoute';
import { Landing, PrivatePage } from '...';

const AppRoutes = (props) => (
  <Switch>
    {/* pages */}
    <Route exact path="/" component={Landing} {...props} />

    {/* private */}
    <PrivateRoute path="/private" title="private" component={PrivatePage} {...props} />

    {/* default path */}
    <Redirect to="/" />
  </Switch>
);

export default AppRoutes;

PrivateRoute.jsx

import React from 'react';
import { Route, useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';

import { MergedProps } from './PropsRoute';
import { useAuth } from './auth-hook';

const Loading = () => (
  <div> 
    Loading...
  </div>
);

export const PrivateRoute = ({
  nextRoute,
  component,
  title,
  ...rest
}) => {
  const auth = useAuth();
  const history = useHistory();

  if (!auth.isAuthenticated) {
    try {
      if (auth.initialized) {
        auth.login();
      }
    } catch (e) {
      history.push('/');
    }

    return <Loading />;
  }

  return (
    <Route
      {...rest}
      render={(routeProps) => (
        <MergedProps
          {...rest}
          {...routeProps}
          component={component}
          title={title}
          user={auth.user}
          isAuthenticated={auth.isAuthenticated}
        />
      )}
    />
  );
};

PrivateRoute.defaultProps = {
  title: 'app',
  nextRoute: '',
};

PrivateRoute.propTypes = {
  component: PropTypes.func.isRequired,
  title: PropTypes.string,
  nextRoute: PropTypes.string,
};

export default {
  PrivateRoute,
};

PropsRoute.jsx

import React from 'react';
import { Route } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import DocumentTitle from 'react-document-title';

export const MergedProps = (props) => {
  const { component: Component, title, ...rest } = props;
  const { t, i18n } = useTranslation();

  return (
    <DocumentTitle title={t([`common:titles.${title}`, 'common:titles.app'])}>
      <Component {...rest} />
    </DocumentTitle>
  );
};

export const PropsRoute = ({ component, title, ...rest }) => (
  <Route
    {...rest}
    render={(routeProps) => (
      <MergedProps
        {...routeProps}
        {...rest}
        component={component}
        title={title}
      />
    )}
  />
);

MergedProps.defaultProps = {
  title: 'app',
};

MergedProps.propTypes = {
  component: PropTypes.func.isRequired,
  title: PropTypes.string,
};

PropsRoute.defaultProps = {
  title: 'app',
};

PropsRoute.propTypes = {
  component: PropTypes.func.isRequired,
  title: PropTypes.string,
};