React Insights: a simple ‘Blogs Application’ from Scratch (Part-4)
How to use Routing capabilities in React?
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
Let’s incorporate page routing functionality into the application. Although we can still navigate between Home and New Blog using anchor tags, currently, it doesn’t utilize React routing. Instead, the request is sent to the server, which responds with the entire HTML page.
To enhance page efficiency and reduce download time, it is beneficial to implement React routing.
To achieve this, let’s install react-router-dom and import the necessary components.
Wrap the <Home> & <Create> component under the React <Router> component & also add the <Switch>, that is used to switch b/w different page routes, upon loading.
Let’s add a new component <Create> as Create.js file, that will be used on UI to navigate back & forth from home page.
Another tweak needed is to modify the <Navbar> by incorporating the <Link> component instead of using an anchor tag that triggers a server call for routing.
Now that we can seamlessly switch between the two pages, it’s crucial to ensure that any ongoing fetch call is canceled or aborted if the user switches to a different page before the fetch is completed. This optimization is essential to prevent React from throwing errors when attempting to load data while the component is already unmounted.
Let’s integrate the AbortController into the useFetch hook, which will handle the abortion of ongoing fetch operations.
In the browser console, you can now observe messages logged as the user navigates away from the page before the fetch operation completes and returns the data.
Learnings so far
- React Routing capabilities
- Aborting the ongoing fetch call for performance
What next?
- Continuing in series of blogs application, we need the capabilites to load a single blog along with it’s details. Let’s see an example of it in next part.
Hope this helps!!! Please check out the rest of the parts in the series.