ઉકેલાયેલ: url રિએક્ટ રાઉટરમાં પરિમાણો ઉમેરી રહ્યા છે

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

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. “react-router-dom” માંથી { BrowserRouter રાઉટર, રૂટ, લિંક, યુઝ પરમ્સ } તરીકે આયાત કરો;
// આ react-router-dom લાઇબ્રેરીમાંથી ઘટકોને આયાત કરે છે જેનો ઉપયોગ આ કોડમાં કરવામાં આવશે.

2. // આ એક રાઉટર ઘટક બનાવે છે જે વિવિધ માર્ગો વચ્ચે નેવિગેશનને હેન્ડલ કરશે.

3. // આ 'વપરાશકર્તાનામ' ના ગતિશીલ પરિમાણ સાથેનો માર્ગ બનાવે છે.

4. // જ્યારે આ રૂટ મેચ થાય છે ત્યારે આ વપરાશકર્તા ઘટકને રેન્ડર કરે છે.

5. John // આ /user/john રૂટની લિંક બનાવે છે જેના પર ક્લિક કરવામાં આવે ત્યારે વપરાશકર્તાનામ પેરામીટર તરીકે 'john' સાથે વપરાશકર્તા ઘટક રેન્ડર કરશે.

6. ફંક્શન User() { //આ એક ફંક્શનલ કમ્પોનન્ટ છે જે યુઝરનામને દલીલ તરીકે લે છે અને જ્યારે તેની ઉપરની લિંક પર ક્લિક કરીને બોલાવવામાં આવે છે ત્યારે તેને div ટૅગ્સની અંદર રેન્ડર કરે છે.

7. ચાલો { username } = useParams(); //આ useParams() માંથી વપરાશકર્તાનામની ઍક્સેસ મેળવવા માટે ડિસ્ટ્રક્ચરિંગનો ઉપયોગ કરે છે.

8. વળતર (

); //આ વપરાશકર્તાનામમાં જે પણ મૂલ્ય પસાર કરવામાં આવ્યું હતું તે આ કિસ્સામાં 'જ્હોન' હશે, જેમાં ડિવ ઘટક પરત કરે છે.

પ્રતિક્રિયા રાઉટર શું છે

રીએક્ટ રાઉટર એ રીએક્ટ એપ્લીકેશન માટે રૂટીંગ લાઈબ્રેરી છે. તે વિવિધ પૃષ્ઠો વચ્ચે નેવિગેશન સાથે સિંગલ-પેજ એપ્લિકેશન (SPA) બનાવવા માટે જરૂરી મુખ્ય ઘટકો અને કાર્યો પૂરા પાડે છે. તે વિકાસકર્તાઓને રૂટ્સને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે, જે પાથ છે જે એપ્લિકેશનમાં ચોક્કસ ઘટકોને મેપ કરે છે. રીએક્ટ રાઉટર રીડાયરેક્ટ, ડાયનેમિક રૂટ મેચીંગ અને ક્વેરી પેરામીટર્સ જેવી સુવિધાઓ પણ પ્રદાન કરે છે.

URL માટે પરિમાણો

રિએક્ટ રાઉટરમાં URL ના પરિમાણો વિકાસકર્તાઓને URL થી પ્રતિક્રિયા ઘટકોમાં ડાયનેમિક ડેટા પસાર કરવાની મંજૂરી આપે છે. આ ડાયનેમિક રૂટ્સ બનાવવા માટે ઉપયોગી છે જેનો ઉપયોગ URL માં પસાર કરેલા પરિમાણોના આધારે વિવિધ સામગ્રી પ્રદર્શિત કરવા માટે થઈ શકે છે. ઉદાહરણ તરીકે, "/user/:id" જેવા રૂટનો ઉપયોગ URL માં પાસ કરેલ id પરિમાણ સાથે વપરાશકર્તા પ્રોફાઇલ પૃષ્ઠ પ્રદર્શિત કરવા માટે થઈ શકે છે. પેરામીટર્સનો ઉપયોગ ડેટા ફિલ્ટર કરવા અથવા અન્ય કામગીરી માટે પણ થઈ શકે છે જેને URL માંથી ડાયનેમિક ડેટાની જરૂર હોય છે.

હું પ્રતિક્રિયામાં URL માં પરિમાણ કેવી રીતે ઉમેરું

રિએક્ટ રાઉટરમાં URL માં પેરામીટર ઉમેરવાનું "params" ઑબ્જેક્ટનો ઉપયોગ કરીને કરવામાં આવે છે. આ ઑબ્જેક્ટ તમને કી-વેલ્યુ જોડીમાં પસાર કરવાની મંજૂરી આપે છે જે URL માં ઉમેરવામાં આવશે. પરિમાણ ઉમેરવા માટે, તેને ફક્ત આ રીતે params ઑબ્જેક્ટમાં ઉમેરો:

const params = { param1: 'value1', param2: 'value2' };

પછી, તમારો રૂટ બનાવતી વખતે, તમે params ઑબ્જેક્ટમાં આ રીતે દલીલ તરીકે પસાર કરી શકો છો:

પછી આ રૂટ પર નેવિગેટ કરતી વખતે પરિમાણો URL માં ઉમેરવામાં આવશે.