રીએક્ટ રાઉટરની બાહ્ય લિંક્સને લગતી મુખ્ય સમસ્યા એ છે કે તેઓ વિવિધ પૃષ્ઠો વચ્ચે નેવિગેટ કરતી વખતે અનપેક્ષિત વર્તનનું કારણ બની શકે છે. ઉદાહરણ તરીકે, જો વપરાશકર્તા પ્રતિક્રિયા રાઉટર પૃષ્ઠ પર હોય ત્યારે બાહ્ય લિંક પર ક્લિક કરે છે, તો બ્રાઉઝર એપ્લિકેશનમાં નવા પૃષ્ઠ પર જવાને બદલે વર્તમાન પૃષ્ઠથી દૂર નેવિગેટ કરશે. આ વપરાશકર્તાઓ માટે મૂંઝવણ અને હતાશા તરફ દોરી શકે છે જેઓ પૃષ્ઠો વચ્ચે સરળ સંક્રમણની અપેક્ષા રાખે છે. વધુમાં, બાહ્ય લિંક્સ એસઇઓ સાથે સમસ્યાઓનું કારણ બની શકે છે કારણ કે શોધ એંજીન બાહ્ય સ્ત્રોતોમાંથી સામગ્રીને યોગ્ય રીતે અનુક્રમિત કરવામાં સક્ષમ નથી.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. આ લાઇન રીએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી લિંક ઘટકને આયાત કરે છે.
2. આ લાઇન એક લિંક એલિમેન્ટ બનાવે છે જે ક્લિક કરવામાં આવે ત્યારે “https://www.example.com” પર રીડાયરેક્ટ કરશે અને નવા પેજ પર કોઈ રેફરર માહિતી મોકલ્યા વિના તેને નવી ટેબમાં ખોલશે. લિંકનું ટેક્સ્ટ "બાહ્ય લિંક" હશે.
બાહ્ય લિંક શું છે
રીએક્ટ રાઉટરમાં એક બાહ્ય લિંક એ એક લિંક છે જે વપરાશકર્તાને એપ્લિકેશનની બહારના પૃષ્ઠ પર લઈ જાય છે. આ એક બાહ્ય વેબસાઇટ અથવા અન્ય એપ્લિકેશન હોઈ શકે છે. બાહ્ય લિંક્સનો ઉપયોગ વપરાશકર્તાઓને એપ્લિકેશનની અંદરની સામગ્રીથી સંબંધિત વધારાની માહિતી અથવા સંસાધનો પ્રદાન કરવા માટે થાય છે. તેનો ઉપયોગ વપરાશકર્તાઓને વધુ સંશોધન માટે અન્ય એપ્લિકેશનો અથવા વેબસાઇટ્સ પર નિર્દેશિત કરવાના માર્ગ તરીકે પણ થઈ શકે છે.
રીએક્ટ રાઉટર સાથે બાહ્ય લિંક કેવી રીતે ઉમેરવી
React રાઉટરમાં React રાઉટર સાથે બાહ્ય લિંક ઉમેરવી એ એક સીધી પ્રક્રિયા છે. પ્રથમ, તમારે રીએક્ટ-રાઉટર-ડોમ પેકેજમાંથી લિંક ઘટક આયાત કરવાની જરૂર છે. પછી, તમે બાહ્ય URL પર લિંક બનાવવા માટે લિંક ઘટકનો ઉપયોગ કરી શકો છો. લિંક બનાવવા માટેની સિન્ટેક્સ આના જેવો દેખાય છે:
ઉદાહરણ તરીકે, જો તમે Google પર લિંક બનાવવા માંગતા હો, તો તે આના જેવું દેખાશે:
એકવાર તમે તમારી લિંક બનાવી લો તે પછી, તમે વધુ સારી સુલભતા અને સુરક્ષા હેતુઓ માટે લક્ષ્ય અને rel વિશેષતાઓ જેવા વધારાના પ્રોપ્સ ઉમેરી શકો છો. દાખ્લા તરીકે:
