React - Functional Component for PrivateRoute, and for in index file

Question

I'm using React Router and Redux for a simple React app (with MaterialUI). I want to make my app with mostly functional components, and i have some difficulties to try to handle it in some case, which are :

1 - Private Route stateless - I'm using Firebase, and to detect if the user is logged in or not, i store some information in the redux store. I use these informations to make Private and Public route, as the React Router tutorial. But these components are currently not functional, and i don't know how to proceed to make them functional. Any suggestion ?

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 - AppBar/Drawer stateless

I have the same issue with my appbar/drawer. They are currently in my index as posted in the code above. They should appear only when the user is connected and i need to pass connection state from the redux store.

I guess both issues have the same solution but i can't find it. Does anyone have one for me ?

Thanks.

Answer 1

The route ( PrivateRoute )needs a path parameter, just like this:

const PrivateRoute = ({ component: Component, path,user, ...rest }) => (

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