React - функциональный компонент для PrivateRoute и для в индексном файле

Question

Я использую React Router и Redux для простого приложения React (с MaterialUI). Я хочу сделать мое приложение в основном функциональными компонентами, и у меня есть некоторые трудности, чтобы попытаться обработать его в некоторых случаях, а именно:

1 - Частный маршрут без сохранения состояния - Я использую Firebase, и чтобы определить, вошел ли пользователь в систему или нет, я храню некоторую информацию в хранилище избыточных данных. Я использую эту информацию для создания частного и общедоступного маршрута, как учебник по React Router. Но эти компоненты в настоящее время не работают, и я не знаю, как сделать их функциональными. Любое предложение?

index.js

import React from "react";
import { render } from "react-dom";

import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import { IntlProvider } from "react-intl";
import { locale, messages } from "./i18n/i18n";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import PublicRoute from "./components/PublicRoute";
import PrivateRoute from "./components/PrivateRoute";

import rootReducer from "./reducers/root.reducer";
import firebase from "./firebase";

import AppBar from "./components/AppBar/AppBar";
import Drawer from "./components/Drawer/Drawer";
import Login from "./containers/Login/Login";
import ForgotPassword from "./containers/ForgotPassword/ForgotPassword";
import Dashboard from "./containers/Dashboard/Dashboard";

const store = createStore(rootReducer, applyMiddleware(thunk, logger));

render(
  <Provider store={store}>
    <IntlProvider locale={locale} messages={messages}>
      <Router>
        <div>
          <AppBar />
          <Drawer />
          <Switch>
            <PublicRoute exact path="/" component={Login} />
            <PublicRoute path="/forgotpassword" component={ForgotPassword} />
            <PrivateRoute path="/dashboard" component={Dashboard} />
          </Switch>
        </div>
      </Router>
    </IntlProvider>
  </Provider>,
  document.getElementById("root")
);

PrivateRoute.js

import React from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ component: Component, user, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      user ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

const mapStateToProps = (state, props) => ({
  user: state.auth.user
});

export default connect(mapStateToProps)(PrivateRoute);

2 - панель приложений / ящик без состояния

У меня та же проблема с моей панелью приложений / ящиком. Они в настоящее время в моем индексе, как указано в коде выше. Они должны появляться только тогда, когда пользователь подключен, и мне нужно передать состояние подключения из хранилища резервов.

Полагаю, обе проблемы имеют одно и то же решение, но я не могу его найти. У кого-нибудь есть такой для меня?

Спасибо.