Skip to content

Commit

Permalink
Move Outlet to self-guided part of router lesson
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaylagordon
kaylagordon committed Dec 6, 2024
1 parent 23f6925 commit ef13380
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 78 deletions.
1 change: 0 additions & 1 deletion module3/lessons/react-router-prework.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<Route />` component do?
3. What does the `<Routes />` component do?
4. What does the `<Outlet />` component do?

#### Route Changers
9. What does the `<Link />` component do? How does a user interact with it?
Expand Down
154 changes: 77 additions & 77 deletions module3/lessons/react-router.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ module: 3
* `NavLink` A special version of the \<Link\> 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

<!-- COMMENTING OUT THE PREWORK AS IT'S BEEN DEEMED UNNECCESARY AT THIS TIME -->
Expand All @@ -39,7 +38,6 @@ In small groups, discuss the following questions:
- Routes
- Link
- NavLink
- Outlet
</section> -->

## Why Routing?
Expand Down Expand Up @@ -498,11 +496,11 @@ export default Creatures;
</section>
<section class="dropdown">
### 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';
Expand All @@ -518,77 +516,21 @@ function App() {
</nav>
<h1>Puppies or Sharks?</h1>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/:animal" element={<Creatures />}>
<Route path=":id" element={<CreatureDetails />}/>
</Route>
<Route path="/" element={<Home />} />
<Route path=":animal" element={<Creatures />} />
<Route path="/:animal/:id" element={<CreatureDetails />} />
</Routes>
</main>
);
}

export default App;
```
<section class="call-to-action">
### 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?
</section>
</section>
<section class="dropdown">
### 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 (
<Link to={`/${creatureType}/${id}`}>
<img src={image} key={id} id={id} className="app-img"/>
</Link>
)
});

return (
<>
<h1>{creatureType}!</h1>
<Outlet />
{creatureImages}
</>
)
}

export default Creatures;
```
<section class="call-to-action">
### Let's explore
1. Try moving the `<Outlet />` component around. Does it's placement matter?
2. Why is the `<Creatures />` component still showing?
3. What would you have to change if you didn't want the `<Creatures />` component to render at this path?
</section>
***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*** <br/>
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.
</section>
<section class="dropdown">
### 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
Expand Down Expand Up @@ -616,15 +558,18 @@ export default CreatureDetails;
```
</section>
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.
<section class="dropdown">
<br>
## 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`
<section class="dropdown">
### 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';
Expand All @@ -640,21 +585,75 @@ function App() {
</nav>
<h1>Puppies or Sharks?</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path=":animal" element={<Creatures />} />
<Route path="/:animal/:id" element={<CreatureDetails />} />
<Route path="/" element={<Home />}/>
<Route path="/:animal" element={<Creatures />}>
<Route path=":id" element={<CreatureDetails />}/>
</Route>
</Routes>
</main>
);
}

export default App;
```
<section class="call-to-action">
### 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?
</section>
</section>
<section class="dropdown">
### 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 (
<Link to={`/${creatureType}/${id}`}>
<img src={image} key={id} id={id} className="app-img"/>
</Link>
)
});

return (
<>
<h1>{creatureType}!</h1>
<Outlet />
{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
<section class="call-to-action">
### Let's explore
1. Try moving the `<Outlet />` component around. Does it's placement matter?
2. Why is the `<Creatures />` component still showing?
3. What would you have to change if you didn't want the `<Creatures />` component to render at this path?
</section>
</section>
<br>
***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*** <br/>
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.
<section class="call-to-action">
### Final Reflections
Expand All @@ -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`
</section>
## Extra Resources:
Expand Down

0 comments on commit ef13380

Please sign in to comment.