Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Authentication React Router, Authorization, and Refactoring Protect Routes That Require Authentication

Posted by Berian Lowe
Berian Lowe
22,438 Points

History Stack Loop...

Might be getting ahead of myself here, but in the new PrivateRoute.js file we added, shouldn't we add the replace property to the Navigate element to avoid getting caught in a history stack loop?

import { useContext } from "react";
import UserContext from "../context/UserContext";
import { Navigate, Outlet } from "react-router-dom";

const PrivateRoute = () => {
  const { authUser } = useContext(UserContext);
  if (authUser) {
    return <Outlet />;
  } else {
    return <Navigate to="/signin" replace />;
  }
};

export default PrivateRoute;
Berian Lowe
Berian Lowe
22,438 Points

Thanks Jamie, I do understand the issue, was just a little confused to why we applied the replace property to the Navigate element in UserSignOut.js but not to the PrivateRoute as adding replace fixes the issue of the infinite loop we introduced here!

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

It's possible it was overlooked and or just subtracted from the learning purposes of the concept being taught. Either way, great job spotting it and thinking of a solution!