Advantages of dynamic vs static routing in React

Question

I\'m reading about static vs dynamic routing in React Router, and I\'m struggling to identify the advantages of the latter (and why v4 chose to go with it). I can see the ad

Answer 1

According to the React-Router docs:

When we say dynamic routing, we mean routing that takes place as your app is rendering, not in a configuration or convention outside of a running app. That means almost everything is a component in React Router.

Its clear for the explanation that, all you Routes are not initialised at the start of your application,

In React-router v3 or below, it used static Routes and all Routes would be initialised at the top level, and nesting used to be achieved like

With this API setup, react-router was reimplementing parts of React (lifecycles, and more), and it just didn’t match the composition logic that React recommends on using.

With Dynamic Routes the following advatages, comes to be foreseen

Nested Routes

Nested Routes with Dynamic Routing are more like

const App = () => (
    
        {/* here's a div */}
        

        {/* here's a Route */}
        
        
    
)

// when the url matches `/todos` this component renders
const Todos  = ({ match }) => (
    // here's a nested div
    

        {/* here's a nested Route,
            match.url helps us make a relative path */}
        
    
)

In the above example, only when /todos matches the route-path, the Todo component is mounted and only then the Route path /todos/:id is defined.

Responsive routes

The React-router docs have a good use case for this.

Consider a user navigates to /invoices. Your app is adaptive to different screen sizes, they have a narrow viewport, and so you only show them the list of invoices and a link to the invoice dashboard. They can navigate deeper from there.

However on a large screen, navigation is on the left and the dashboard or specific invoices show up on the right.

and hence /invoices is not a valid Route for a large screen and we would want to redirect to /invoices/dashboard. This may so happen, the user rotates his/her phone from a portait to a landscape mode. This can easily be done using dynamic Routing

const Invoices = () => (
  

    {/* always show the nav */}
    

    
      {screenIsSmall => screenIsSmall
        // small screen has no redirect
        ? 
            
            
          
        // large screen does!
        : 
            
            
            
          
      }
    
  
)

Using Dynamic Routes with React Router’s, think about components, not static routes.

Code Splitting

One great feature of the web is that we don’t have to make our visitors download the entire app before they can use it. You can think of code splitting as incrementally downloading the app. This is made possible with Dynamic Routing.

The advantages it brings is that all your code need not be downloaded at once and hence it makes initial rendering faster.

Here is a good article that helps you setUp codeSplitting for your application

Writing Composable Authenticated Routes

With Dynamic Routing its also made easier to write PrivateRoutes(an HOC that does authentication) which allow for authenticating users and providing them access to specific Routes and redirecting otherwise. This call all me made very generically

A Typical Private Route would be look like

const PrivateRoute = ({ component: Component, ...rest }) => (
  
      fakeAuth.isAuthenticated ? (
        
      ) : (
        
      )
    }
  />
);

and can be used as