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!