React Router

 

React Router

React router is the standart library provided by react-router-dom for impementing client-side routing in applications.

 

React Router key features 🔑

React Router enables dynamic page routing and links URLs to the state of the application to enhance the user experience of SAPs(Single PAge Applications). It also helps manage the lifecycle of components through navigation and ensures that components are appropriately rendered in response to URL changes.

React Router Version 6

React router V6 has been developed with a focus on performance optimization and simplification of the API.

 

1. Simplified Route Configuration: In V6, the route configuration is simplified. For example, instead of using the 'component' prop on the '<Route>' component, the 'element' prop can be used to directly pass JSX, and routing can also be provided by storing it in JSON format.

 

 

2. JSON type routing: 

 

Advantages:

• Explicit Structure: The routing structure in JSON format is clear and consistent, making it easy to manage programmatically.
• Code Separation: Maintains a cleaner and more manageable codebase.
• Large-scale Projects: Easier for multiple developers to manage collaboratively in large-scale projects.

Disadvantages: 

• Lack of Intuitiveness: Visually less intuitive compared to JSX, making it difficult to understande the hierarchy of routes.
• Limited Flexibility: Not as flexible as JSX in certain situations, and there may be constraints when dealing with custom or nested routes

3.JSX Format:

 

Advantages:

• Intuitive Structure: Defining routes in JSX format makes the structure of the routes visually clear and easy to understand.
• Component Integration: Allows for direct placement of components within route definitions, facilitating a natural and straigthforward connection between routes and view components.
• Flexibility: JSX is highly integrable with various UI libraries and allows for easy expansion or modification of components and properties.

 

Disadvatages:

• Complexity: In large-scale applications, managing many nested and conditional routes can make the code complicated using the JSX format.
• Separation Issue: The routing logic and UI components are sometimes mixed, making the boundaries between UI components and logic unclear

 

 

 

---------------------------------------------------------------------Pocket Routing-------------------------------------------------------------------

 

Route Provider:

createBrowserRouter:

Layout:

dynamic path:

static path: