Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.

 

import React from 'react';import { Link, Route, Redirect } from 'react-router-dom';const Menu = () => (    
     
        
      
Menu
        
      Food        
      Drinks        
      Redirect        
      
        {            return 
       
Section: {match.params.section}
        }}>        
              
      
        {            return 
               }}>
          
     
);export default Menu;

 

So if we hit /menu/food or /menu/drink, we will go to:

     
       {            return 
      
Section: {match.params.section}
        }}>
     

Becase :section([a-z]+) match 'food' or 'drink'.

 

If we hit /menu/123, we will go to:

     
       {            return 
              }}>
     

It will render Redirect component, and redirect us to /menu/food