נפתרה: הפניה מחדש עם נתב react v6

הבעיה העיקרית הקשורה להפניה עם 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 מספק רכיב חדש בשם שניתן להשתמש בהם כדי להפנות משתמשים מדף אחד לאחר. כדי להשתמש בו, אתה פשוט צריך לייבא את רכיב Redirect מחבילת react-router-dom ולאחר מכן להשתמש בו בתצורת המסלול שלך. כאשר משתמש מבקר בנתיב שצוין באביזת 'מאת', הוא יופנה לנתיב שצוין באביזר 'אל'. לדוגמה:

ייבוא ​​{ Redirect } מ-'react-router-dom';
} />

איך אני מפנה מחדש ב-react router v6 לאחר הכניסה

הפנייה מחדש לאחר התחברות מוצלחת היא תכונה נפוצה ביישומי אינטרנט. ב-React Router v6, אתה יכול להשתמש ב- רכיב כדי להפנות את המשתמש לאחר כניסה מוצלחת.

לשם כך, תצטרכו ליצור מסלול שבודק אם המשתמש מחובר ואז מפנה אותו בהתאם. לדוגמה:

{
if (isLoggedIn) {
לַחֲזוֹר ;
אחר} {
לַחֲזוֹר ;
}
}} />

בדוגמה זו, אנו בודקים אם המשתמש מחובר ואז מעבדים את רכיב ה-LoginPage או מפנים אותו ל-/dashboard. אתה יכול גם להעביר אביזרים לרכיב Redirect כך: זה מאפשר לך לעקוב אחר היכן היה המשתמש לפני שהוא הופנה מחדש.

איך אני מפנה אוטומטית ב-react

React Router מספק רכיב Redirect שניתן להשתמש בו כדי להפנות משתמשים אוטומטית כאשר תנאים מסוימים מתקיימים. כדי להשתמש בו, עליך לעבור בנתיב שאליו ברצונך להפנות כאביזר. ניתן גם להעביר אובייקט עם מצב ו/או פרמטרים של שאילתה במידת הצורך.

כדי להפנות אוטומטית, תצטרך להשתמש ברכיב בתוך רכיב מסלול ולהגדיר תנאי למועד ההפניה מחדש. לדוגמה, אם תרצה להפנות משתמשים מדף הבית של האפליקציה שלך לדף הכניסה לאחר שהם לוחצים על קישור, תוכל לעשות משהו כמו זה:

{הוא מחובר? : }

בדוגמה זו, אנו משתמשים במשתנה הבוליאני isLoggedIn (שיהיה צורך להגדיר במקום אחר) כתנאי שלנו למתי עלינו לבצע את ההפניה מחדש. אם זה נכון, אז אנחנו מעבדים את רכיב הבית שלנו; אחרת, אנו מבצעים את ההפניה מחדש.

איך מפנים מחדש אחרי 5 שניות בתגובה

כדי להפנות מחדש לאחר 5 שניות ב-React Router, אתה יכול להשתמש בפונקציה setTimeout() כדי לקרוא למתודה history.push() עם המסלול הרצוי כארגומנט.

דוגמא:
ייבוא ​​{ useHistory } מ-"react-router-dom";
const history = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);