Lesson 2

Exploring the Universe of Nested and Protected Routes with React Router v6

Introduction and Overview

Greetings, fellow coders! Our mission today involves Nested Routing in React and the protection of secret paths using react-router-dom v6. We aim to master Nested Routes and Protected Routes in our React application!

We will:

  1. Discover Nested Routing.
  2. Set up routes using Outlet.
  3. Guard routes with the element.
  4. Explore other routes using Navigate.

Let's embark on this journey!

Understanding Nested Routing in React

Nested Routing involves defining a route within another — much like a set of Russian dolls. It's especially useful when building complex React applications.

Imagine creating a space travel blog. The homepage lists all the visited planets, and clicking a planet takes you to a “planet” page that shows various posts about your visit. These posts can then be further categorized, creating a nested route for easier navigation.

Setting Up Nested Routes with `Outlet` and `index` attribute

To guide our spaceship to nested voyages, we set up Nested Routes using the Outlet component in react-router-dom v6. The Outlet component acts as a placeholder for nested routes, like a docking bay where our spaceship can anchor when we travel within nested sections of our journey.

Let's say we're creating a user profile page with 'Account Details' and 'Account Settings' pages accessible from there. So, we'll create nested routes under the 'Profile' route.

But what if we want to display a specific view when users visit the 'Profile' route initially, like a 'Profile Overview' page? Here's where the index attribute comes in!

The index attribute in react-router-dom v6 allows us to set a default nested route that will be displayed when the parent route is visited. Wrapping the ProfileOverview component with the Route component and including the index attribute will set this as the default view for the 'Profile' route.

Here is an updated example:

JavaScript
1function App() { 2 return ( 3 <Router> 4 <Routes> 5 <Route path="/" element={<Home />} /> 6 <Route path="profile" element={<Profile />}> 7 <Route index element={<ProfileOverview />} /> 8 <Route path="details" element={<ProfileDetails />} /> 9 <Route path="settings" element={<ProfileSettings />} /> 10 </Route> 11 </Routes> 12 </Router> 13 ); 14} 15 16// Components for the user profile 17function Profile() { 18 return ( 19 <div> 20 <h2>User Profile</h2> 21 <nav> 22 <Link to="details">Details</Link> 23 <Link to="settings">Settings</Link> 24 </nav> 25 <Outlet /> 26 </div> 27 ); 28}

Here, visiting '/profile' will display the ProfileOverview. If the user navigates to '/profile/details' or '/profile/settings', the respective components will be rendered.

Shielding Routes: Security in React with conditional `element` Attribute

To fend off unauthorized access, we secure our Universe (Routes). Protected routes ensure selective access.

Routes can be protected using the conditional element attribute in react-router-dom v6. Let's protect your 'Profile' routes:

JavaScript
1import {BrowserRouter as Router, Routes, Route, Outlet, Link, Navigate} from "react-router-dom"; 2 3function App() { 4 const user = getUserDetails(); // Function to get user details 5 return ( 6 <Router> 7 <Routes> 8 <Route path="/" element={<Home />} /> 9 <Route path="profile" 10 element={user ? <Profile /> : <Navigate to="/login" />} 11 > 12 ... 13 </Route> 14 </Routes> 15 </Router> 16 ); 17}

Rendering Profile occurs only when there's a user; otherwise, it navigates to 'Login'.

Navigating the Space with `Navigate`

Navigate, part of react-router-dom, facilitates transitions across different routes in our application.

JavaScript
1import {BrowserRouter as Router, Routes, Route, Outlet, Link, Navigate} from "react-router-dom"; 2 3function ProfileSettings() { 4 const [updated, setUpdated] = React.useState(false); 5 6 function updateSettings() { 7 setUpdated(true); 8 } 9 10 // If settings are updated, navigate to ProfileDetails 11 return updated ? <Navigate to="../details" /> : <SettingsComponent />; 12}

Upon updating settings, we navigate to the 'ProfileDetails' page.

Lesson Summary and Practice

What a fantastic voyage, space explorers! We journeyed through Outlet, Navigate, and protected routes using element with react-router-dom v6.

Now, brace yourself for challenges in the form of exciting hands-on exercises to reinforce and enhance your skills. Remember, practice propels us towards mastery. So get ready, set, and code!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.