The course is part of this learning path
This module looks at how to Route in React. You’ll be looking at linking components, creating dynamic links, parameterized routes, and how to install the React Router DOM.
The objectives of this module are to provide you with an understanding of:
- How to install the React Router DOM
- Hooks in React
- How to create restful services
- How to use an Effect Dependency Array
- How to hand errors in data requests
- How to send data
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at email@example.com to let us know what you think.
- [Instructor] So we've got the app to create a link for each of the courses in the array, and supply the route to render that has a course ID as a parameter. All is left to do now is to create a course component, to display the data on that route. And that needs to know which course it should use. We're showing the makings of that component now. We've passed in the courses array from the filterable courses table. As we need to find the particular course we want to display from it. Once found, we'll help the core state to instate, so that's been added too. The return of the component uses the core state in its markup. We've kept that simple, although you should be able to find some conditional rendering in there. As course is rendered as a child of a route component, it receives a parameter object like the one we saw earlier. However, prior to the outreach to version 5.1, we would have passed the match object in, as part of props, and then access the params object and the key that we're interested in. That code is shown now, where match is added to props. We then set ID in the component to match.params.id, that's on line seven. We then use that ID as an argument to find the right course from the array and pass it, a state to the return of the component. So what's the alternative best practice now? Well, we agreed to version 5.1, introduce four hooks. These are use history, use location, use route match and use params. And it's the last of these that we're going to leverage. If you want to find out about the others, please refer to the React Redux documentation. The use params hook returns an object that contains key value pairs of the parameters put into a URL. It provides direct access to the match.params object, if the routes are activated, without the need to pass the match object as props. It takes no arguments and the parameters are accessed by deconstructing an object with the keys it contains. We'll insert this, and it's import is the cost component now. Now we have the ID parameter from the route that identifies the course ID to display. We can use that in the user fact hook once the component has initially rendered, hence the conditional rendering in the return. There's a gotcha to mention here, the params object returns it's value with strings, as ideas start as a number in the data source. We need to pass the ID from the useParams hook into a number, when we use it to compare to the ID of the course that we want to display in the course array. You can see that we've done that on line 13. As course as an ID could change, they've been identified as dependencies for the effect and put into the array on line 17. We can see that as we click on the courses in the course table, in the browser. The course component updates and re-renders with the selected courses info. So now we've got a routed application that uses parameterized routes to update components. If you followed the full lining path to here, you should now have enough skills, knowledge and understanding, to practice making relatively simple, single page React applications.
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.