Основна проблема, пов’язана з перенаправленням за допомогою React Router v6, полягає в тому, що компонент не рендериться повторно, коли відбувається перенаправлення. Це означає, що будь-який стан або властивості, пов’язані з компонентом, не будуть оновлені під час перенаправлення, і будь-які зміни, внесені до цих значень, не відображатимуться на новій сторінці. Крім того, оскільки React Router v6 не підтримує рядки запитів, усі параметри запиту, передані в URL-адресі, також будуть втрачені під час перенаправлення.
import { Redirect } from "react-router-dom"; <Redirect to="/home" />
1. Цей рядок імпортує компонент Redirect з бібліотеки react-router-dom.
2. Цей рядок відображає компонент Redirect, який перенаправлятиме користувача на маршрут «/home».
Як я можу переспрямувати в React Router v6
v6
React Router v6 надає новий компонент під назвою
import { Redirect } from 'react-router-dom';
Як переспрямувати в React Router v6 після входу
Перенаправлення після успішного входу є загальною функцією веб-додатків. У React Router v6 ви можете використовувати
Для цього вам потрібно буде створити маршрут, який перевіряє, чи ввійшов користувач, а потім перенаправляє його відповідним чином. Наприклад:
if (isLoggedIn) {
повертати
} Ще {
повертати
}
}} />
У цьому прикладі ми перевіряємо, чи ввійшов користувач, а потім або відтворюємо компонент LoginPage, або перенаправляємо його на /dashboard. Ви також можете передати атрибути в компонент Redirect так:
Як мені автоматично перенаправляти в React
React Router надає компонент Redirect, який можна використовувати для автоматичного перенаправлення користувачів, коли виконуються певні умови. Щоб використовувати його, ви повинні вказати шлях, на який ви хочете переспрямувати, як проп. За потреби ви також можете передати об’єкт із параметрами стану та/або запиту.
Для автоматичного перенаправлення вам потрібно буде використовувати компонент у компоненті Route і налаштувати умову, коли має відбуватися перенаправлення. Наприклад, якщо ви хочете переспрямувати користувачів із домашньої сторінки програми на сторінку входу після того, як вони натиснуть посилання, ви можете зробити щось на зразок цього:
{isLoggedIn ?
У цьому прикладі ми використовуємо логічну змінну isLoggedIn (яку потрібно було б встановити в іншому місці) як умову, коли ми повинні виконати переспрямування. Якщо це правда, ми візуалізуємо наш компонент Home; інакше виконуємо перенаправлення.
Як ви перенаправляєте через 5 секунд у React
Щоб перенаправити через 5 секунд у React Router, ви можете використати функцію setTimeout(), щоб викликати метод history.push() із потрібним маршрутом як аргументом.
приклад:
імпорт { useHistory } з “react-router-dom”;
const history = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);
1 думка про «Вирішено: перенаправлення за допомогою маршрутизатора React v6»