A React Router külső hivatkozásaival kapcsolatos fő probléma az, hogy váratlan viselkedést okozhatnak a különböző oldalak közötti navigáció során. Például, ha a felhasználó egy külső hivatkozásra kattint, miközben egy React Router oldalon tartózkodik, a böngésző elnavigál az aktuális oldalról, ahelyett, hogy az alkalmazáson belüli új oldalra irányítana. Ez zavart és frusztrációt okozhat azokban a felhasználókban, akik zökkenőmentes átállást várnak az oldalak között. Ezenkívül a külső hivatkozások is problémákat okozhatnak a keresőoptimalizálással kapcsolatban, mivel előfordulhat, hogy a keresőmotorok nem tudják megfelelően indexelni a külső forrásokból származó tartalmat.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. Ez a sor importálja a Link összetevőt a react-router-dom könyvtárból.
2. Ez a sor létrehoz egy linkelemet, amely a „https://www.example.com” címre irányít át, ha rákattint, és megnyitja azt egy új lapon anélkül, hogy az új oldalra küldött hivatkozói információval rendelkezne. A hivatkozás szövege „Külső hivatkozás” lesz.
Mi az a külső hivatkozás
A React Router külső hivatkozása olyan hivatkozás, amely a felhasználót az alkalmazáson kívüli oldalra viszi. Ez lehet egy külső webhely vagy más alkalmazás. A külső hivatkozások arra szolgálnak, hogy a felhasználók számára további információkat vagy forrásokat biztosítsanak az alkalmazáson belüli tartalomhoz kapcsolódóan. Használhatók arra is, hogy a felhasználókat más alkalmazásokra vagy webhelyekre irányítsák további felfedezés céljából.
Külső hivatkozás hozzáadása a React Routerhez
Egy külső kapcsolat hozzáadása a React Routerhez a React Routerben egyszerű folyamat. Először is importálnia kell a Link összetevőt a react-router-dom csomagból. Ezután a Hivatkozás összetevővel létrehozhat egy hivatkozást egy külső URL-re. A link létrehozásának szintaxisa így néz ki:
Például, ha szeretne létrehozni egy linket a Google-hoz, az így néz ki:
Miután létrehozta a hivatkozást, további kellékeket adhat hozzá, például cél és rel attribútumokat a jobb hozzáférhetőség és a biztonság érdekében. Például:
