History of React Router Routers

Understanding React Router v6.4 Changes

React Router version 6.4 introduced a major shift in how routers are handled. Understanding these changes is essential for working with both legacy code and newer React projects.

This reading will explore the key differences between pre-v6.4 routers and the updated approach, along with the motivations behind these changes.

Pre-v6.4 Routers

Before React Router v6.4, applications gained routing capabilities by wrapping the app inside a router, typically BrowserRouter:

import { BrowserRouter } from 'react-router-dom';


  

    

Routes were then defined inside the App component:

import { Route } from 'react-router-dom';

} />
    

Nested Routes in Pre-v6.4

Nested routes were created by defining new Route components within a parent component. As React rendered the component tree, the router would discover these nested routes dynamically.

The Problem: Data Fetching

The older approach had a significant drawback: it tied data fetching to the rendering sequence. Since nested routes were discovered as components were rendered, data fetching was delayed for deeper components.

For example:

• The parent component had to fetch and render first.
• Only after rendering could child components begin their own data requests.
• This created delays, especially in deeply nested routes.

The Solution: Version 6.4+ Routers

React Router v6.4 introduced Data APIs to solve these inefficiencies. These APIs allow data fetching to begin as soon as rendering starts, regardless of component nesting.

To achieve this, React Router v6.4 introduced a new way of defining routes outside of the rendering process. The preferred router now is createBrowserRouter:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { path: '/', element:  },
  { path: 'stocks', element:  }
]);

function App() {
  return ;
}

export default App;
    

With this approach:

• Routes are statically defined at the start.
• Data fetching begins earlier in the rendering process.
• Performance improves, especially for complex applications.

What You Have Learned

In this reading, you explored:

• The legacy approach to routing before v6.4
• The challenges of delayed data fetching in nested routes
• How React Router v6.4 introduced createBrowserRouter to optimize performance

Further Exploration

To deepen your understanding, explore these topics:

• React Router Official Documentation
• React Official Documentation

Conclusion

React Router v6.4 marked a major improvement in how routes are defined and how data fetching is handled. By using createBrowserRouter, developers can create more efficient, high-performance applications.