Hello guys, I’m trying to add firebase in my react project to handle the authentication.
(Here’s the code: https://github.com/satansdeer/react-firebase-auth)
Everything works fine, the route works and the authentication works as well…the only problem is that if you create a nested route protected from the authentication refreshing stop working. Let’s say that we have 4 routes: /login, /login/test and /home, /home/test.
/home is a protected route. If I go to /login and /login/test and from there I hit the refresh button I end up in the same page I was before, so that works.
If I login and I am redirect to /home and I hit refresh it works as well. The problem is if I go to /home/test and then I hit refresh, what I see is a blank page.
That’s how the protected route mechanism is implemented and used:
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";
const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
const {currentUser} = useContext(AuthContext);
return (
<Route
{...rest}
render={routeProps =>
!!currentUser ? (
<RouteComponent {...routeProps} />
) : (
<Redirect to={"/login"} />
)
}
/>
);
};
export default PrivateRoute
import PrivateRoute from "./PrivateRoute";
const App = () => {
return (
<AuthProvider>
<Router>
<div>
<PrivateRoute exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
</div>
</Router>
</AuthProvider>
);
};
How can I fix this problem?