ઉકેલાયેલ: પ્રતિક્રિયા રાઉટર રીલોડ પૃષ્ઠ મળ્યું નથી

રીએક્ટ રાઉટર રીલોડ પેજને લગતી મુખ્ય સમસ્યા એ નથી કે જ્યારે વપરાશકર્તા પેજને રિફ્રેશ કરે છે, ત્યારે બ્રાઉઝર વર્તમાન URL માટે સર્વરને વિનંતી કરવાનો પ્રયાસ કરશે. જો કે, રિએક્ટ રાઉટર ક્લાયંટ-સાઇડ રાઉટીંગ હોવાથી, URL માટે કોઈ અનુરૂપ સર્વર રૂટ નથી અને આમ 404 નોટ ફાઉન્ડ એરર પરત કરવામાં આવે છે. આ ખાસ કરીને સમસ્યારૂપ બની શકે છે જો વપરાશકર્તાઓ ચોક્કસ સામગ્રી રિફ્રેશ પર દેખાવાની અપેક્ષા રાખતા હોય.

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// લાઇન 1: આ લાઇન બ્રાઉઝર રાઉટર, રૂટ અને સ્વિચ ઘટકોને પ્રતિક્રિયા-રાઉટર-ડોમ લાઇબ્રેરીમાંથી આયાત કરે છે.

// લાઇન 3: આ લાઇન એપ નામના ફંક્શનને વ્યાખ્યાયિત કરે છે જે JSX કોડ પરત કરે છે.

// લાઇન 5: આ લાઇન સમગ્ર JSX કોડને રીએક્ટ-રાઉટર-ડોમમાંથી રાઉટર ઘટકમાં લપેટી લે છે.

// લાઇન 6: આ લાઇન રીએક્ટ-રાઉટર-ડોમમાંથી સ્વિચ ઘટકમાં તમામ રૂટ્સને લપેટી લે છે.

// રેખાઓ 7 – 9: આ રેખાઓ તેમના સંબંધિત ઘટકો (ઘર અને વિશે) સાથે અનુક્રમે '/' અને '/ વિશે' માટે બે માર્ગો વ્યાખ્યાયિત કરે છે.

// રેખાઓ 11 – 12: આ રેખાઓ જ્યારે કોઈ અન્ય રૂટ મેળ ખાતા નથી ત્યારે તે માટે રૂટ વ્યાખ્યાયિત કરે છે, જે "પૃષ્ઠ મળ્યું નથી" એમ કહીને h1 ટેગ રેન્ડર કરે છે.

પૃષ્ઠમાં ભૂલ મળી નથી

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

પ્રતિક્રિયા રાઉટરમાં ન મળ્યું પૃષ્ઠને હું કેવી રીતે હેન્ડલ કરી શકું

રિએક્ટ રાઉટરનો ઉપયોગ કરતી વખતે, તમે કસ્ટમ રૂટ બનાવીને ન મળેલા પેજને હેન્ડલ કરી શકો છો જે જ્યારે URL હાલના કોઈપણ રૂટ સાથે મેળ ખાતું ન હોય ત્યારે NotFound ઘટક રેન્ડર કરશે. આ કરવા માટે, તમારે "*" પર સેટ કરેલ પાથ સાથે નવો રૂટ બનાવવાની અને તમારા NotFound ઘટકને રેન્ડર કરવાની જરૂર છે.

દાખ્લા તરીકે:

} />

આ કોઈપણ URL સાથે મેળ ખાશે જે પહેલાથી અસ્તિત્વમાંના રૂટ દ્વારા મેળ ખાતું નથી અને તમારા NotFound ઘટકને રેન્ડર કરશે.

હું પ્રતિક્રિયા આપતા પૃષ્ઠને ફરીથી લોડ કરવા માટે કેવી રીતે દબાણ કરી શકું

રિએક્ટ રાઉટરમાં, તમે હિસ્ટ્રી ઑબ્જેક્ટ પર રિપ્લેસ મેથડનો ઉપયોગ કરીને પૃષ્ઠને ફરીથી લોડ કરવા દબાણ કરી શકો છો. આ ઇતિહાસ સ્ટેકમાં વર્તમાન એન્ટ્રીને નવી એન્ટ્રી સાથે બદલશે, આમ પેજને ફરીથી લોડ કરવાની ફરજ પડશે. આ પદ્ધતિનો ઉપયોગ કરવા માટે, તમારે પહેલા ઇતિહાસ ઑબ્જેક્ટની ઍક્સેસ મેળવવાની જરૂર છે. તમારું રાઉટર ઘટક બનાવતી વખતે તમે તેને પ્રોપ તરીકે પસાર કરીને આ કરી શકો છો:

const AppRouter = () => (

{/* તમારા રૂટ અહીં છે */}

);

એકવાર તમે ઇતિહાસ ઑબ્જેક્ટની ઍક્સેસ મેળવી લો, પછી તમે તેની બદલો પદ્ધતિનો ઉપયોગ આ રીતે કરી શકો છો:

history.replace('/some-route');