ইউআরএল ফরম্যাটিং এবং Routing প্রতিক্রিয়া- ব্যবহারের জন্য একটি নির্দেশিকা React Router

একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে, URL ফর্ম্যাটিং এবং routing পৃষ্ঠাগুলি নেভিগেট করতে এবং সংশ্লিষ্ট বিষয়বস্তু প্রদর্শনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। routing প্রতিক্রিয়া পরিচালনা করতে, আমরা লাইব্রেরি ব্যবহার করতে পারি। ইউআরএল ফরম্যাট করতে এবং আপনার রিঅ্যাক্ট অ্যাপ্লিকেশানে হ্যান্ডেল করার জন্য এখানে একটি প্রাথমিক নির্দেশিকা রয়েছে । React Router React Router routing

 

ইনস্টল করুন React Router

টার্মিনালে আপনার প্রকল্প ডিরেক্টরি খুলুন এবং ইনস্টল করতে নিম্নলিখিত কমান্ডটি চালান: React Router npm install react-router-dom

আপনার প্রতিক্রিয়া উপাদান থেকে প্রয়োজনীয় উপাদান আমদানি করুন । React Router

 

রুট সংজ্ঞায়িত করুন

আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন মোড়ানো এবং একটি বেস URL বিন্যাস সেট করতে উপাদান ব্যবহার করুন । <BrowserRouter>

<Route> আপনার অ্যাপ্লিকেশনে রুট সংজ্ঞায়িত করতে উপাদান ব্যবহার করুন .

উদাহরণ:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

Link s সংজ্ঞায়িত করুন

আপনার অ্যাপ্লিকেশনে নেভিগেশন তৈরি করতে উপাদানটি ব্যবহার করুন । <Link> link

উদাহরণ:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

অ্যাক্সেস পাথ প্যারামিটার

পাথ প্যারামিটার অ্যাক্সেস করতে বিন্যাসে <Route> একটি বৈশিষ্ট্য সহ উপাদান ব্যবহার করুন । path /users/:id

দ্বারা সংজ্ঞায়িত উপাদানের মধ্যে <Route>, আপনি useParams() পাথ প্যারামিটারের মানগুলি অ্যাক্সেস করতে ব্যবহার করতে পারেন।

উদাহরণ:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

ব্যবহার করুন Switch এবং Redirect

পাথের সাথে মেলে এমন প্রথম রুটটি রেন্ডার করতে উপাদানটি ব্যবহার করুন । <Switch>

একটি নির্দিষ্ট পথ থেকে অন্য ব্যবহারকারীদের জন্য উপাদান ব্যবহার করুন. <Redirect> redirect

উদাহরণ:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

এগুলি ইউআরএল ফর্ম্যাটিং এবং routing প্রতিক্রিয়া ব্যবহার করে কিছু মৌলিক ধারণা । ব্যবহার করে, আপনি URL-এর উপর ভিত্তি করে বিভিন্ন বিষয়বস্তু নেভিগেট এবং প্রদর্শন করার ক্ষমতা সহ নমনীয় প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করতে পারেন। React Router React Router