The New Way To Create Protected Routes With React Router V6

Summary

The video explains how to update React applications using React Router version 6 to create protected routes, preventing unauthorized or unauthenticated users from accessing certain pages. It discusses the changes from React Router 5, including replacing the Switch component with Routes, updating Redirect to Navigate for redirection, and using the Outlet component to nest routes. It then walks through updating the PrivateRoute component to leverage these changes, checking for authentication and conditional rendering to either display child routes or redirect to the login page.

Takeaways

• 😀 The video demonstrates how to create protected routes in React using React Router 6
• 👉 We need to wrap all routes in a <Routes> component instead of <Switch> in React Router 6
• 🔑 To create a protected route, we can use an <Outlet> inside a condition to check authentication
• 🛡️ If authentication passes, the <Outlet> will render the child routes, otherwise redirect to login
• ✅ react-router-dom v6 introduces new <Routes> and <Navigate> components instead of <Switch> and <Redirect>
• ➡️ The route <Component> prop is now <Element>, so we pass JSX elements instead of component references
• 🌐 Nested routes are now possible by wrapping routes in parent <Route> elements using <Outlet>
• 👮‍♂️ Protected routes check authentication status and then conditionally show content or redirect
• 📝 Good upgrades to check: react-router-dom version, <Outlet> usage, <Navigate> instead of <Redirect>
• 🎥 Other great React Router 6 upgrade references are from Academind and Traversy Media on YouTube

Q & A

What was the main purpose of this video?

The main purpose was to show how to create protected routes with React and React Router 6 after an upgrade from React Router 5.

What is a protected route in React?

A protected route in React is a route that requires authentication or certain permissions before allowing access. It prevents unauthenticated users from accessing private pages.

What were some of the issues with the old implementation using React Router 5?

Some issues were: 1) Redirect component changed to Navigate in React Router 6, 2) New Routes component replaces old Switch component, 3) Route component needs to be a direct child of Routes.

How does the new Outlet component help with nesting routes?

The Outlet component allows nesting routes instead of directly extending the Route component. If authenticated, Outlet renders the child routes, if not it navigates away.

What syntax changed from React Router 5 to 6?

Components prop changed to Element prop when specifying the component to render for a route.

Why wrap routes in the Routes component?

The Routes component requires that its direct children be Route components. This allows nested routing.

What does the exact prop do on a Route component?

The exact prop matches the path exactly rather than partially like normal routing.

What feedback was the video creator looking for?

The video creator was looking for feedback on whether this is the simplest and best way to implement protected routes in React Router 6.

Where can you find more details on the changes?

The video description links to an article explaining the changes between React Router 5 and 6 in more detail.

What other resources were mentioned for learning React Router 6?

Other video resources mentioned were from Traversy Media and Academind.