React રાઉટર URL params થી સંબંધિત મુખ્ય સમસ્યા એ છે કે તેનો ઉપયોગ ડાયનેમિક રૂટમાં કરવો મુશ્કેલ હોઈ શકે છે. આ એટલા માટે છે કારણ કે URL પેરામ્સ સ્થિર છે અને રૂટ બનાવ્યા પછી બદલી શકાતા નથી. આનો અર્થ એ છે કે જો કોઈ વપરાશકર્તાને અલગ-અલગ પેરામીટર્સ સાથે અલગ પેજ ઍક્સેસ કરવાની જરૂર હોય, તો તેણે દરેક પેરામીટર સંયોજન માટે નવો રૂટ બનાવવો પડશે. વધુમાં, URL params નો ઉપયોગ કરતી વખતે, તમામ સંભવિત સંયોજનોનો ટ્રૅક રાખવો અને દરેકને રાઉટર દ્વારા યોગ્ય રીતે હેન્ડલ કરવામાં આવે છે તેની ખાતરી કરવી મુશ્કેલ બની શકે છે.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
આ કોડ URL માંથી વપરાશકર્તાનામ સાથે પૃષ્ઠને રેન્ડર કરવા માટે પ્રતિક્રિયા રાઉટર સેટ કરી રહ્યો છે.
1. પ્રથમ લાઇન રીએક્ટ રાઉટર DOM લાઇબ્રેરીમાંથી ઘટકોની આયાત કરે છે.
2. એપ ફંક્શન રાઉટર ઘટકને તેની અંદરના રૂટ ઘટક સાથે પરત કરે છે, જે સ્પષ્ટ કરે છે કે “/user/” થી શરૂ થતા કોઈપણ URL ને UserPage ઘટક રેન્ડર કરવું જોઈએ.
3. યુઝરપેજ ફંક્શન URLમાંથી વપરાશકર્તાનામ મેળવવા માટે useParams() નો ઉપયોગ કરે છે અને પછી તે વપરાશકર્તાનામનો ઉપયોગ કરીને શુભેચ્છા રેન્ડર કરે છે.
URL પરિમાણો
React રાઉટરમાં URL params એ ડેટાના ટુકડા છે જે URL ના ભાગ રૂપે રૂટ પર પસાર થાય છે. તેઓ વિકાસકર્તાઓને રૂટ પર ગતિશીલ માહિતી પસાર કરવાની મંજૂરી આપે છે, જેમ કે ID અથવા ક્વેરી સ્ટ્રિંગ. આનો ઉપયોગ ડાયનેમિક રૂટ્સ બનાવવા માટે થઈ શકે છે જેનો ઉપયોગ ડેટાબેઝમાંથી ચોક્કસ વસ્તુઓ પ્રદર્શિત કરવા અથવા વપરાશકર્તાના ઇનપુટના આધારે સામગ્રીને ફિલ્ટર કરવા જેવી વસ્તુઓ માટે થઈ શકે છે. રિએક્ટ રાઉટર URL પેરામ્સને એક્સેસ કરવા અને તેની હેરફેર કરવા માટે ટૂલ્સ પ્રદાન કરે છે, જે તમારી એપ્લિકેશનમાં તેનો ઉપયોગ કરવાનું સરળ બનાવે છે.
તમે પ્રતિક્રિયામાં રૂટમાંથી URL પેરામ્સ કેવી રીતે મેળવશો
રિએક્ટ રાઉટરમાં, તમે Params હૂકનો ઉપયોગ કરીને રૂટમાંથી URL પેરામ્સને ઍક્સેસ કરી શકો છો. આ હૂક URL પેરામીટર્સની કી-વેલ્યુ જોડી ધરાવતો ઑબ્જેક્ટ આપે છે. ઉદાહરણ તરીકે, જો તમારો રૂટ /user/:id છે, તો તમે useParams().id સાથે id પરિમાણને ઍક્સેસ કરી શકો છો.
