Redux অ্যাপ্লিকেশনে React Router ইনস্টল করা

গত কয়েকটি পাঠে আমরা Redux নিয়ে কাজ করার জন্য মৌলিক টুলস ইনস্টল করেছি। প্রায়শই এমন হয় যে একটি অ্যাপ্লিকেশনের জন্য তার ওয়েব পৃষ্ঠাগুলোতে নেভিগেট করার একটি রাউটারের প্রয়োজন হয় এবং আমাদের অ্যাপ্লিকেশন এর ব্যতিক্রম হবে না। এই জন্য আমরা React Router লাইব্রেরিটি ইনস্টল করব।

আমাদের প্রজেক্টটি খুলি এবং টার্মিনালে নিম্নলিখিত কমান্ডটি টাইপ করি:

terminalnpm install react-router-dom

একটু আগেই বলে নিচ্ছি, আমাদের Redux অ্যাপ্লিকেশনটি ঐতিহ্যগতভাবে পণ্যগুলোর জন্য উত্সর্গীকৃত, যেগুলোর তথ্য কিছু বিক্রেতা দ্বারা পোস্ট করা হয়। তাই এখন আমরা একটু মেইন কম্পোনেন্ট App-কে পরিবর্তন করব, এবং আমাদের অ্যাপ্লিকেশনে রাউটিং কার্যকর করার জন্য ফাংশনালিটি যোগ করব।

শুরুতে src ফোল্ডারে যাব, তারপর app-এ যাব এবং এখানে root.jsx ফাইল তৈরি করব। এটি হবে আমাদের সাইটের রুট: বামে আমাদের কাছে একটি মেনু থাকবে, এবং ডানদিকে - কন্টেন্ট (আপাতত আমাদের এখানে শুধুমাত্র একটি হেডার আছে):

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>Products</a>
          <a>Sellers</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>This is my first Redux app!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

এবং App কম্পোনেন্টটি আমরা পরিবর্তন করব। শুরুতে এর সমস্ত কন্টেন্ট সম্পূর্ণভাবে মুছে ফেলব। তারপর রাউটারের জন্য দুটি ফাংশন এবং আমাদের রুট কম্পোনেন্ট Root ইম্পোর্ট করব:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

ইম্পোর্টের নিচে একটি রাউটার তৈরি করব, এবং প্রথম রাউটটি লিখব, এতে আমাদের Root কে প্রদর্শনযোগ্য এলিমেন্ট হিসেবে পাস করব এবং, সেই অনুসারে, পাথটি '/' সেট করব। পরবর্তীতে App-তে আমরা অন্যান্য প্রয়োজনীয় রাউটও যোগ করব:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

নিচে App ফাংশনের কোড লিখব:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

সম্পন্ন। চালু করি। পরবর্তী বিভাগে আমরা Redux অ্যাপ্লিকেশন কাজ করার জন্য কম্পোনেন্ট বাস্তবায়ন করব।

শেষে একটু সৌন্দর্য যোগ করি, এর জন্য index.css-এ স্টাইল লিখে:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}