В чем разница между react-router 5 и 6 версии?

Основные различия между React Router v5 и v6

React Router v6 представляет собой значительное обновление, которое упрощает API и делает маршрутизацию более интуитивной. Главное изменение — замена компонента Switch на Routes, который автоматически выбирает наиболее подходящий маршрут, а не первый совпадающий.

Изменения в компонентах маршрутов

В v5 использовался компонент Switch для группировки Route, и порядок маршрутов имел значение. В v6 Switch заменен на Routes, а Route теперь принимает prop element вместо component или render. Это позволяет передавать компоненты напрямую:

// React Router v5


// React Router v6

  } />
  } />

Навигация и хуки

В v5 для программной навигации использовался хук useHistory. В v6 он заменен на useNavigate, который предоставляет более гибкий API:

// React Router v5
const history = useHistory();
history.push('/home');

// React Router v6
const navigate = useNavigate();
navigate('/home');
navigate(-1); // для перехода назад

Вложенные маршруты и относительные ссылки

React Router v6 значительно улучшил поддержку вложенных маршрутов. Теперь можно определять дочерние маршруты прямо внутри родительского компонента, используя Outlet:

function App() {
  return (
    
      }>
        } />
        } />
      
    
  );
}

function Dashboard() {
  return (
    
      Dashboard
       {/* Здесь будут отображаться дочерние маршруты */}
    
  );
}

Вывод

React Router v6 предлагает более чистый и предсказуемый API, упрощает работу с вложенными маршрутами и улучшает производительность. При миграции с v5 на v6 стоит обратить внимание на замену Switch на Routes, обновление хуков навигации и рефакторинг вложенных маршрутов с использованием Outlet.