ಪರಿಹರಿಸಲಾಗಿದೆ: ಇತಿಹಾಸ ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಅಪ್ಲಿಕೇಶನ್ ಬಳಸಿ

ಹಿಸ್ಟರಿ ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಅನ್ನು ಬಳಸುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆಯೆಂದರೆ ಅದು ಹ್ಯಾಶ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಇದರರ್ಥ ಎಲ್ಲಾ URL ಗಳು ಸಂಪೂರ್ಣ ಮಾರ್ಗಗಳಾಗಿರಬೇಕು, ಇದು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಡೈನಾಮಿಕ್ ಮಾರ್ಗಗಳಿಗೆ ಯಾವುದೇ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವಿಲ್ಲ, ಇದು ಬಹು ಪುಟಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುವಾಗ ಸಮಸ್ಯೆಯಾಗಬಹುದು. ಅಂತಿಮವಾಗಿ, ಹಿಸ್ಟರಿ ರಿಯಾಕ್ಟ್ ರೂಟರ್ v6 ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್‌ಗೆ ಯಾವುದೇ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ, ಇದು ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಅಗತ್ಯವಾಗಬಹುದು.

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

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// ಈ ಕೋಡ್ ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್ ಲೈಬ್ರರಿಯಿಂದ ಬ್ರೌಸರ್ ರೂಟರ್, ಸ್ವಿಚ್, ರೂಟ್ ಮತ್ತು ಯೂಸ್ ಹಿಸ್ಟರಿ ಘಟಕಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತದೆ.
// ನಂತರ ಇದು ಇತಿಹಾಸ ವಸ್ತುವನ್ನು ರಚಿಸಲು ಯೂಸ್ ಹಿಸ್ಟರಿ ಹುಕ್ ಅನ್ನು ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್ ಎಂಬ ಕಾರ್ಯವನ್ನು ರಚಿಸುತ್ತದೆ.
// ಈ ಇತಿಹಾಸ ವಸ್ತುವನ್ನು ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್ ಎಂಬ ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ, ಅದು ಹೊಸ ನಮೂದನ್ನು ಇತಿಹಾಸ ಸ್ಟ್ಯಾಕ್‌ಗೆ ತಳ್ಳುತ್ತದೆ.
// ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯವು ನಂತರ ಕೆಲವು JSX ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇದು ಆನ್‌ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲರ್‌ನೊಂದಿಗೆ ಬಟನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಅದು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್ ಎಂದು ಕರೆಯುತ್ತದೆ.
// ಅಂತಿಮವಾಗಿ, ಒಂದು ಸ್ವಿಚ್ ಘಟಕವು ಅದರೊಳಗೆ ಒಂದು ಮಾರ್ಗದ ಘಟಕವನ್ನು ಹೊಂದಿದೆ, ಅದು ಅದರ ಮಾರ್ಗವು “/ಹೊಸ-ಸ್ಥಳ” ಕ್ಕೆ ಹೊಂದಿಕೆಯಾದಾಗ ಹೊಸ ಸ್ಥಳ ಘಟಕವನ್ನು ನಿರೂಪಿಸುತ್ತದೆ.

ಬಳಕೆಯ ಇತಿಹಾಸ ಎಂದರೇನು

useHistory ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಒದಗಿಸಿದ ರಿಯಾಕ್ಟ್ ಹುಕ್ ಆಗಿದ್ದು ಅದು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಇತಿಹಾಸ ವಸ್ತುವನ್ನು ಪ್ರವೇಶಿಸಲು ಘಟಕಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಹೊಸ ಸ್ಥಳಗಳನ್ನು ಇತಿಹಾಸದ ಸ್ಟ್ಯಾಕ್‌ಗೆ ತಳ್ಳಲು, ಪ್ರಸ್ತುತ ಸ್ಥಳವನ್ನು ಬದಲಿಸಲು, ಇತಿಹಾಸದಲ್ಲಿ ಹಿಂದಕ್ಕೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ಹೋಗಲು ಇದನ್ನು ಬಳಸಬಹುದು.

ನಾನು ಮಾರ್ಗದ ಇತಿಹಾಸವನ್ನು ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಹೇಗೆ ಪಡೆಯುವುದು

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ, ಯೂಸ್‌ಹಿಸ್ಟರಿ ಹುಕ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಮಾರ್ಗ ಇತಿಹಾಸವನ್ನು ಪಡೆಯಬಹುದು. ಈ ಹುಕ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಇತಿಹಾಸದಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು, ಹಿಂದಕ್ಕೆ ಮತ್ತು ಮುಂದಕ್ಕೆ ಹೋಗಲು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಮಾಡಲು ನೀವು ಬಳಸಬಹುದಾದ ಇತಿಹಾಸದ ನಿದರ್ಶನಕ್ಕೆ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಿಂದ ಹುಕ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ ಮತ್ತು ನಂತರ ಅದನ್ನು ನಿಮ್ಮ ಘಟಕದಲ್ಲಿ ಕರೆ ಮಾಡಿ:

'react-router-dom' ನಿಂದ {useHistory} ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ;

const MyComponent = () => {
const ಇತಿಹಾಸ = useHistory();

// ಈಗ ನೀವು 'ಇತಿಹಾಸ' ವಸ್ತುವಿನ ಮೂಲಕ ಮಾರ್ಗ ಇತಿಹಾಸವನ್ನು ಪ್ರವೇಶಿಸಬಹುದು.

ಹಿಂತಿರುಗಿ (...);
}

ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಇತಿಹಾಸ API ಅನ್ನು ಬಳಸುತ್ತದೆಯೇ

ಹೌದು, ಪ್ರಸ್ತುತ ಸ್ಥಳ ಮತ್ತು ಅದರ ಇತಿಹಾಸವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ರಿಯಾಕ್ಟ್ ರೂಟರ್ HTML5 ಇತಿಹಾಸ API ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಅನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ ಪುಟವನ್ನು ನವೀಕರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ವೇಗವಾಗಿ ಮತ್ತು ಸುಗಮಗೊಳಿಸುತ್ತದೆ. ಇತಿಹಾಸ API ಆಳವಾದ ಲಿಂಕ್ ಮಾಡಲು ಸಹ ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರಿಗೆ ನೇರವಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಪುಟಕ್ಕೆ ಕೊಂಡೊಯ್ಯುವ ಲಿಂಕ್‌ಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.