React Insights: a simple ‘Blogs Application’ from Scratch (Part-5)
How to use useParams hook to load page based on URL?
Links to every other section of this series>
Part 1: React Environment setup ||| Part 2: How to list Data on webpage with React ||| Part 3: How to fetch data using React ||| Part 4: How to use Routing capabilities in React ||| Part 5: How to use useParams hook to load page based on URL ||| Part 6: How to use form fields on React application ||| Part7: How to perform delete action in React
The use case we will execute as an example is, imagine having a page with listed Blog items. The aim is to display the details of an individual blog, when the user clicks on it. This implies fetching all the data associated with a specific blog, uniquely identified by the id property of the blog, that the user clicked on.
Thus, fetching the blogs endpoint along with an id should retrieve the details from the JSON file using the json-server, which is serving the endpoint.
Additionally, we must create a <BlogDetail> component, which should be added into app.js to load the details data. Given that we already possess a custom hook (exampled in part-4 of this series) for fetching, displaying loading, handling errors, and managing pending states, it would be optimal to reuse the same.
To retrieve the id from the URL, we’ll utilize another hook called useParams. This hook allows us to extract the id parameter set by the router. Once we have the id, let’s reuse the useFetch custom hook, incorporating the id in the end of URL formation as a call to the JSON-server. As a response server will return corresponding data object to the actually clicked blog item in the listed blogs.
The example JSON Data file along with id parameter for all the blog objects.
Include a route in App.js to load the detailed page for blogs. This means that if the URL contains an id in the URL, it will route to load the details page.
The final element we need to address is adding a link that triggers the action to load the blog details. Essentially, this involves clicking on one of the listings on the blog list page to load the details page.
Take note of the construction of the ‘to’ parameter in the <Link> component. This will incorporate the id of the target blog that the user clicks on and intends to load the details for.
Here is what the UI for the blogs details page would resemble.
Clicking the Home page will navigate back to the listings, and clicking on any specific blog will load the details in the below listed blogs.
Learnings so far
- using useParams hook to identify the parameters from the URL
- Extracting id from URL.
- Incorporating the components under <Router> component to navigate using id parameter
What next?
- Now that we have the application that navigates b/w the listings & details, let’s look into example to be able to add new blog based on user inputs.
- Navigate user back to home page, once the blog is successfully created. leverage useHistory hook.
Hope this helps!!! Please check out the rest of the parts in the series.