Atrisināts: reaģēt maršrutētāja ārējā saite

Galvenā problēma, kas saistīta ar React Router ārējām saitēm, ir tā, ka tās var izraisīt neparedzētu uzvedību, pārvietojoties starp dažādām lapām. Piemēram, ja lietotājs React Router lapā noklikšķina uz ārējās saites, pārlūkprogramma virzīsies prom no pašreizējās lapas, nevis novirzīsies uz jauno lietojumprogrammas lapu. Tas var radīt apjukumu un neapmierinātību lietotājiem, kuri sagaida vienmērīgu pāreju starp lapām. Turklāt ārējās saites var izraisīt arī SEO problēmas, jo meklētājprogrammas, iespējams, nevarēs pareizi indeksēt saturu no ārējiem avotiem.

import { Link } from "react-router-dom";

<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>

1. Šajā rindā tiek importēts saites komponents no react-router-dom bibliotēkas.
2. Šajā rindiņā tiek izveidots saites elements, kas pēc noklikšķināšanas novirzīs uz “https://www.example.com” un atver to jaunā cilnē, nenosūtot uz jauno lapu novirzītāja informāciju. Saites teksts būs “Ārējā saite”.

Kas ir ārējā saite

Ārējā saite programmā React Router ir saite, kas novirza lietotāju uz lapu ārpus lietojumprogrammas. Tā varētu būt ārēja vietne vai cita lietojumprogramma. Ārējās saites tiek izmantotas, lai sniegtu lietotājiem papildu informāciju vai resursus, kas saistīti ar lietojumprogrammas saturu. Tos var izmantot arī kā veidu, lai novirzītu lietotājus uz citām lietojumprogrammām vai vietnēm tālākai izpētei.

Kā pievienot ārēju saiti, izmantojot React Router

Ārējās saites pievienošana ar React Router programmā React Router ir vienkāršs process. Pirmkārt, jums ir jāimportē saites komponents no react-router-dom pakotnes. Pēc tam varat izmantot komponentu Saite, lai izveidotu saiti uz ārēju URL. Saites izveides sintakse izskatās šādi:

Piemēram, ja vēlaties izveidot saiti uz Google, tas izskatītos šādi:

google

Kad esat izveidojis saiti, labākas pieejamības un drošības nolūkos varat pievienot papildu rekvizītus, piemēram, mērķa un rel atribūtus. Piemēram:

google

Related posts:

Leave a Comment