From ef1338075a3a0b6b4af092bfc3d9df542efff833 Mon Sep 17 00:00:00 2001 From: Kayla Gordon Date: Fri, 6 Dec 2024 09:43:12 -0700 Subject: [PATCH] Move Outlet to self-guided part of router lesson --- module3/lessons/react-router-prework.md | 1 - module3/lessons/react-router.md | 154 ++++++++++++------------ 2 files changed, 77 insertions(+), 78 deletions(-) diff --git a/module3/lessons/react-router-prework.md b/module3/lessons/react-router-prework.md index aa53656e..2cdf90e3 100644 --- a/module3/lessons/react-router-prework.md +++ b/module3/lessons/react-router-prework.md @@ -35,7 +35,6 @@ Any code that uses a React-Router-provided component must be wrapped in a _route #### Route Matchers 2. What does the `` component do? 3. What does the `` component do? -4. What does the `` component do? #### Route Changers 9. What does the `` component do? How does a user interact with it? diff --git a/module3/lessons/react-router.md b/module3/lessons/react-router.md index ac0f208c..ffe96b17 100644 --- a/module3/lessons/react-router.md +++ b/module3/lessons/react-router.md @@ -17,7 +17,6 @@ module: 3 * `NavLink` A special version of the \ that will add styling attributes to the rendered element when it matches the current URL. * `Route` Its most basic responsibility is to render some UI when a location matches the route’s path * `Routes` A component that wraps your Route components that selects the best path match -* `Outlet` A component that renders the next match in a set of matches. it must exist in the parent component when nesting routes * `useParams` A hook that allows us to gain access to a Route's params @@ -39,7 +38,6 @@ In small groups, discuss the following questions: - Routes - Link - NavLink -- Outlet --> ## Why Routing? @@ -498,11 +496,11 @@ export default Creatures;
-### 13. Let's tell Router what to do with this new path -```jsx -// App.js +### 13. Let's define a new separate route for `/:animal/:id` +```jsx +import './App.css'; import './App.css'; import { Routes, Route, NavLink } from 'react-router-dom'; import Home from '../Home/Home'; @@ -518,77 +516,21 @@ function App() {

Puppies or Sharks?

- }/> - }> - }/> - + } /> + } /> + } /> ); } export default App; -``` - -
-### Let's explore - -1. Why did we nest the routes? -2. Why don't I have a '/' in front of ":id"? (Note: You can include the '/', if you also include the rest of the path. Meaning, you could do `:/id` OR `/:animal/:id`) -3. Is it working? Is CreatureDetails rendering to the page? -
- -
- -
-### 14. One more step to getting CreatureDetails to appear -```jsx -// Creatures.js - -import './Creatures.css'; -import { getCreaturesData } from '../../data/animalData'; -import { useParams, Link, Outlet } from 'react-router-dom'; - -const Creatures = () => { - const creatureType = useParams().animal; - - const creatureImages = getCreaturesData(creatureType).map(creature => { - const { id, image } = creature; - return ( - - - - ) - }); - - return ( - <> -

{creatureType}!

- - {creatureImages} - - ) -} - -export default Creatures; ``` -
-### Let's explore - -1. Try moving the `` component around. Does it's placement matter? -2. Why is the `` component still showing? -3. What would you have to change if you didn't want the `` component to render at this path? -
-***Why Use the `Outlet`*** ? -The Outlet component serves as a placeholder for rendering nested route content within a parent component. It's a fundamental tool that allows you to seamlessly integrate child components' content into a parent's layout while maintaining UI coherence. - -***Real-World Analogy: Twitter Inbox***
-Imagine a scenario similar to the Twitter inbox. When you access your inbox, you see a list of message previews on the left side of the screen, but the right side remains blank until you select a specific conversation. This structure is where the Outlet comes into play.
-### 15. Now let's make CreatureDetails show the animal's info (hint: look at animalData.js!) +### 14. Now let's make CreatureDetails show the animal's info (hint: look at animalData.js!) ```jsx // CreatureDetails.js @@ -616,15 +558,18 @@ export default CreatureDetails; ```
-Now that you know how to use Outlet, let's explore other ways we can achieve dynamic routing without it. -We are going to remove our nested route and define a new separate route for `/:animal/:id` which is not directly nested within the first route `/`. Each route has it's own component. -You would use this approach when you have distinct pages or components that should be displayed separately based on the URL. -
+
+ +## Self-Guided Exploration: Outlet + +An `Outlet` is a special component used for rendering child routes in nested routing setups. It acts as a placeholder where the content of child routes will be displayed. The `Outlet` component specifies where child route components will be rendered within a parent route's component. -### Defining a new separate route for `/:animal/:id` +
+### 15. Let's update our routes to use nested routes instead ```jsx -import './App.css'; +// App.js + import './App.css'; import { Routes, Route, NavLink } from 'react-router-dom'; import Home from '../Home/Home'; @@ -640,21 +585,75 @@ function App() {

Puppies or Sharks?

- } /> - } /> - } /> + }/> + }> + }/> + ); } export default App; +``` + +
+### Let's explore + +1. Why might we choose to nest the routes? +2. What is the full URL that would render CreatureDetails? +3. Is it working? Is CreatureDetails rendering to the page? +
+ +
+ +
+### 16. One more step to getting CreatureDetails to appear +```jsx +// Creatures.js + +import './Creatures.css'; +import { getCreaturesData } from '../../data/animalData'; +import { useParams, Link, Outlet } from 'react-router-dom'; + +const Creatures = () => { + const creatureType = useParams().animal; + + const creatureImages = getCreaturesData(creatureType).map(creature => { + const { id, image } = creature; + return ( + + + + ) + }); + + return ( + <> +

{creatureType}!

+ + {creatureImages} + + ) +} + +export default Creatures; ``` -Now it's time to remove `Outlet` from our `Creature.js` file since we don't have nested routes and we don't need `Outlet` anymore +
+### Let's explore + +1. Try moving the `` component around. Does it's placement matter? +2. Why is the `` component still showing? +3. What would you have to change if you didn't want the `` component to render at this path? +
-
+***Why Use the `Outlet`*** ? +The Outlet component serves as a placeholder for rendering nested route content within a parent component. It's a fundamental tool that allows you to seamlessly integrate child components' content into a parent's layout while maintaining UI coherence. + +***Real-World Analogy: Twitter Inbox***
+Imagine a scenario similar to the Twitter inbox. When you access your inbox, you see a list of message previews on the left side of the screen, but the right side remains blank until you select a specific conversation. This structure is where the Outlet comes into play.
### Final Reflections @@ -665,8 +664,9 @@ Now it's time to remove `Outlet` from our `Creature.js` file since we don't have - `Routes` - `Link` - `NavLink` -- `Outlet` - `useParams` +- `Outlet` +
## Extra Resources: