Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Let’s go over the key concepts you learned in this stage.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've gone over quite a bit in this stage.
0:00
We created a 404 like route by passing
* to the Route path property.
0:03
So now,
whenever the user misspells a URL, or
0:08
navigates to a URL with no route,
the app renders the NotFound component.
0:12
To make our app more maintainable and
efficient,
0:17
we refactored parts of our code.
0:20
Since the HTML, CSS and JavaScript
components all shared the same behavior,
0:22
we created a CourseContainer component
that accepts the course data as a prop and
0:28
renders them.
0:34
We then learned how to declare dynamic
routes using special URL parameters.
0:35
The dynamic segment of the path prop
contains a colon to indicate a URL
0:41
parameter, and you can provide
multiple parameters by separating them
0:45
with either a forward slash or a dash.
0:50
Our dynamic segment creates two
parameters, topic and name.
0:52
So whenever users navigate to our
dynamic route, we're able to access
0:57
those parameters using the useParams hook,
and render them on the page.
1:02
Lastly, we learned how to
navigate routes programmatically.
1:06
We created a form element that
accepts a teacher's name and topic.
1:10
We access the forms values
using the useRef hook, and
1:15
created a URL path to navigate to
when the user submits the form.
1:19
To handle the navigation,
we imported React Router's useNavigate
1:24
hook to navigate the user
to the desired path.
1:29
Congrats.
1:32
You just learned a valuable new skill
commonly used in React development.
1:33
React and the tools around
it are constantly evolving,
1:38
so be sure to check the resources posted
in the Teacher's Notes to learn about
1:41
the latest in React and React Router.
1:46
I've also included links to Treehouse
courses that will teach you advanced React
1:48
concepts and useful tools for
your projects.
1:53
Remember, we're here to help.
1:56
If you have questions about
anything covered in this course,
1:58
feel free to reach out to the Treehouse
staff or other students in the community.
2:01
Thanks everyone, and happy coding.
2:06
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up