В чем разница в маршрутизации в React Router v5 и React Router v6

Question

В чем разница в маршрутизации в React Router v5 и React Router v6

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

Основные отличия React Router v6 от v5:

Switch заменен на Routes
В v6 <Routes> автоматически выбирает лучший маршрут, в v5 использовался <Switch> с последовательным перебором.

// v5
<Switch>
  <Route path="/about" component={About} />
</Switch>

// v6
<Routes>
  <Route path="/about" element={<About />} />
</Routes>

component заменен на element
Теперь передается JSX-элемент вместо компонента.
Относительные пути и вложенные маршруты
В v6 пути автоматически становятся относительными, а вложенные маршруты проще:

<Route path="user" element={<User />}>
  <Route path="profile" element={<Profile />} />
</Route>

Упрощенный useNavigate вместо useHistory
В v6:

const navigate = useNavigate();
navigate('/about');

Обязательные exact пути
В v6 все пути ведут себя как exact, в v5 нужно было указывать exact явно.

Ответ 18+ 🔞

А, слушай, про эти ваши роутеры реактовые. Ну, версии там меняются, как перчатки, блядь. Только привыкнешь к одному — опять всё перелопатили, сука. Так вот, шестая версия от пятой отличается, как небо и земля, ёпта. Сейчас разжую.

Первое, что бросается в глаза — этот ваш Switch накрылся медным тазом, нахуй. В шестом его заменили на Routes. Раньше, в пятой, он тупо по порядку шерстил маршруты, пока первый подходящий не найдет. А сейчас Routes сам, хитрая жопа, умный такой — выбирает самый лучший, самый точный маршрут. Не надо голову ломать.

// Было в v5, старьё, блядь
<Switch>
  <Route path="/about" component={About} />
</Switch>

// А теперь в v6, красота, ёперный театр
<Routes>
  <Route path="/about" element={<About />} />
</Routes>

Второй пиздец — component выкинули, как ненужное говно. Теперь вместо него element. И передаешь ты не просто имя компонента, а целый JSX-элемент, в скобочках. <About />, вот так вот. Привыкай, блядь.

Третье — с путями вообще магия произошла. Раньше нихуя не понятно было, где относительный путь, где абсолютный. А теперь в шестой версии все пути по умолчанию относительные, красота. И вложенные маршруты делать — одно удовольствие, в рот меня чих-пых!

<Route path="user" element={<User />}>
  <Route path="profile" element={<Profile />} /> {/* Это будет /user/profile, сам догадался! */}
</Route>

Четвертое, моё любимое. useHistory отправили на пенсию, блядь. Вместо него теперь useNavigate. И он, сука, проще простого:

const navigate = useNavigate();
// И всё, блядь. Хочешь перейти?
navigate('/about');
// Хочешь назад на шаг?
navigate(-1);
// Красота, ёбана! Никаких push, replace, нихуя.

И пятое, что многих бесит, но это правильно, блядь. Раньше в пятой версии надо было exract везде пихать, а то маршруты налажают, все друг на друга наезжают. А в шестой все пути по умолчанию ведут себя как exact. То есть /about — это точно /about, а не /about-me или ещё какая хуйня. Расслабься и не парься.

Вот такие пироги, блядь. Сначала охуеешь, потом привыкнешь, а потом поймешь, что так-то оно логичнее. Но первый раз, когда смотришь, — удивление пиздец, честно.