Tech Used
I delved into React Router 6, utilising the codebase I had crafted with React Router 5. The technologies used include React, React Router 6, and JSX.
What I Learned
Import Statement Refinement
React Router 6 brought in a more concise import statement. No more need for the aliasing of BrowserRouter as Router. Now, it's a clean and straightforward import.
Embracing <Routes> for Hierarchy
The introduction of <Routes> replaces <Switch>. This new component allows for a more nested and organised approach to handling routes, aligning with a more hierarchical structure.
What Were the Benefits?
Cleaner Imports
The updated import statements brought a breath of fresh air, simplifying the overall code structure - meaning better readability.
Hierarchical Routing with <Routes>
The switch to <Routes> enhanced the organisation of my route configuration, providing a clearer picture of my application's structure.
What Were the Challenges?
Adaptation to New Syntax
Transitioning from the familiar syntax of React Router 5 to the refined syntax of React Router 6 required a brief adjustment period…and a bit of mental rearrangement!
What Was the Outcome?
The outcome of this is a codebase that incorporates the latest advancements in React Router (that I have worked with at the moment) but also maintains the simplicity.
Cleaner, more organised, and adaptable – React Router 6 has integrated well into my application, offering an improved developer experience and a more robust foundation for future enhancements.
The learning curve was short-lived, and the benefits far outweighed the minor challenges. I am looking forward to create more React Router app to build up my knowledge.
Follow me on LinkedIn!