ઉકેલાયેલ: પ્રતિક્રિયા રાઉટર ડોમ IndexRedirect

રીએક્ટ રાઉટર DOM IndexRedirect સંબંધિત મુખ્ય સમસ્યા એ છે કે તે અનપેક્ષિત રીડાયરેક્ટનું કારણ બની શકે છે. આ એટલા માટે છે કારણ કે જ્યારે ઈન્ડેક્સ રીડાયરેક્ટ ઘટક વપરાશકર્તાઓને વેબસાઈટના રૂટ URL ને એક્સેસ કરે છે ત્યારે તેઓ આપમેળે ચોક્કસ રૂટ પર રીડાયરેક્ટ કરે છે. રુટ URL પર હોમપેજ અથવા અન્ય સામગ્રી જોવાની અપેક્ષા રાખતા વપરાશકર્તાઓ માટે આ મૂંઝવણભર્યું હોઈ શકે છે. વધુમાં, જો વપરાશકર્તા પહેલાથી જ ચોક્કસ પૃષ્ઠ પર નેવિગેટ કરે છે અને પછી તેમના બ્રાઉઝરને તાજું કરે છે, તો તે ઇન્ડેક્સ રીડાયરેક્ટ ઘટકને કારણે અણધારી રીતે તે પૃષ્ઠથી દૂર રીડાયરેક્ટ થઈ શકે છે.

import { BrowserRouter as Router, Route, IndexRedirect } from "react-router-dom";

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

1. “'react-router-dom' માંથી { BrowserRouter રાઉટર, રૂટ, IndexRedirect } તરીકે આયાત કરો;” - આ લાઇન બ્રાઉઝરરાઉટર, રૂટ અને ઇન્ડેક્સ રીડાયરેક્ટ ઘટકોને રીએક્ટ-રાઉટર-ડોમ લાઇબ્રેરીમાંથી આયાત કરે છે.

2. "” – આ લાઇન રાઉટર કમ્પોનન્ટમાં તમામ રૂટ્સને લપેટી લે છે જેનો ઉપયોગ રિએક્ટ એપ્લિકેશન માટે રૂટીંગ સેટ કરવા માટે થાય છે.

3. "” – આ લાઇન '/' ના પાથ સાથે રૂટ સેટ કરે છે. આ પાથની કોઈપણ વિનંતીઓ આ માર્ગ દ્વારા નિયંત્રિત કરવામાં આવશે.

4. "” – આ લાઇન કોઈપણ વિનંતીને '/' પાથને '/home' પર રીડાયરેક્ટ કરે છે.

5. "” – આ લાઇન '/home' ના પાથ સાથેનો માર્ગ સેટ કરે છે. આ પાથની કોઈપણ વિનંતીઓ હોમ ઘટક દ્વારા નિયંત્રિત કરવામાં આવશે જે રૂટ ઘટકની દલીલ તરીકે પસાર કરવામાં આવે છે.

6. "” – આ લાઇન '/about' ના પાથ સાથે રૂટ સેટ કરે છે. આ પાથની કોઈપણ વિનંતીઓ વિશે ઘટક દ્વારા નિયંત્રિત કરવામાં આવશે જે રૂટ ઘટકને દલીલ તરીકે પસાર કરવામાં આવે છે.

7."" અને "" - આ રેખાઓ અનુક્રમે રૂટ અને રાઉટર ઘટકો બંનેને બંધ કરે છે

IndexRedirect શું છે

IndexRedirect એ React રાઉટરમાં એક ઘટક છે જે તમને એક રૂટથી બીજા રૂટ પર રીડાયરેક્ટ કરવાની પરવાનગી આપે છે. જ્યારે તમે વપરાશકર્તાને તમારી એપ્લિકેશનના રૂટ URL થી અન્ય રૂટ પર રીડાયરેક્ટ કરવા માંગતા હો ત્યારે તેનો ઉપયોગ થાય છે. ઉદાહરણ તરીકે, જો તમારી પાસે “/” ના રૂટ URL સાથે એપ્લિકેશન હોય, તો તમે જ્યારે વપરાશકર્તા રૂટ URL ની મુલાકાત લે ત્યારે તેમને “/home” પર રીડાયરેક્ટ કરવા માટે IndexRedirect નો ઉપયોગ કરી શકો છો.

IndexRedirect કેવી રીતે કરવું

React રાઉટરમાં IndexRedirect એ તમારી એપ્લિકેશનના રૂટ URL થી અન્ય URL પર વપરાશકર્તાઓને રીડાયરેક્ટ કરવાની એક રીત છે. આ વપરાશકર્તાઓને તમારી એપ્લિકેશનના સૌથી મહત્વપૂર્ણ પૃષ્ઠ પર નિર્દેશિત કરવા અથવા લેન્ડિંગ પૃષ્ઠ બનાવવા માટે ઉપયોગી થઈ શકે છે.

React રાઉટરમાં IndexRedirect કરવા માટે, તમારે આનો ઉપયોગ કરવાની જરૂર છે ઘટક આ ઘટક બે પ્રોપ્સ લે છે: "ટુ" અને "પુશ". "ટુ" પ્રોપનો ઉપયોગ તે URL નો ઉલ્લેખ કરવા માટે થાય છે કે જેના પર તમે વપરાશકર્તાઓને રીડાયરેક્ટ કરવા માંગો છો, જ્યારે "પુશ" પ્રોપ નિર્ધારિત કરે છે કે જ્યારે આ રીડાયરેક્ટ થાય ત્યારે બ્રાઉઝર ઇતિહાસ અપડેટ થવો જોઈએ કે નહીં (ડિફૉલ્ટ રૂપે સાચું).

ઉદાહરણ તરીકે, જો તમે તમારા રૂટ URL (દા.ત., www.example.com) ની મુલાકાત લેનારા વપરાશકર્તાઓને www.example.com/home પર રીડાયરેક્ટ કરવા માંગતા હો, તો તમે આના જેવી IndexRedirect નો ઉપયોગ કરી શકો છો:

… અન્ય માર્ગો…