রিয়েক্ট রাউটার ডম v6 - Changes & Updates

সম্প্রতি React Router Dom তাদের ভার্সন আপডেট করে ভার্সন ৬ রিলিজ করেছে। এই ভার্সনে বেশ কিছু ব্রেকিং চেঞ্জ এবং আপডেট এসেছে যেগুলো পূর্ববর্তী ভার্সন গুলো থেকে বেশ ভিন্ন এবং নতুন। আজকের এই ব্লগে React Router Dom ভার্সন ৬ এর সকল ব্রেকিং চেঞ্জ এবং নিউ ফিচার গুলো সম্পর্কে উদাহরন সহ বিস্তারিত আলোচনা করা হবে।

কিভাবে ইন্সটল করবো?

Npm: npm install react-router@next react-router-dom@next
Yarn: yarn add react-router@next react-router-dom@next

1. Switch এর পরিবর্তে Routes এসেছে

React Router Dom ভার্সন ৬ এ <Switch> রিমুভ করে এর পরিবর্তে <Routes> আনা হয়েছে। এটিতে <Switch> এর প্রায় সব বৈশিষ্ট্য থাকার পাশাপাশি বেশ কিছু এক্সটা ফিচার রয়েছে।

উদাহরনঃ

React Router v5

import { BrowserRouter, Switch, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </BrowserRouter>
  );
}

React Router v6

import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="dashboard" element={<Dashboard/>} />
      </Routes>
    </BrowserRouter>
  );
}

ভার্সন ৬ এ ভার্সন ৫ এর মতন আর component কে প্রপ্স বা চিল্ড্রেন আঁকারে পাঠানো লাগেনা। element প্রপ এর ভেতর jsx ফরমেটে component কে পাঠাতে হয়।

2. component এর বদলে এসেছে element প্রপ

আপনি যদি উপরের উদাহরণে লক্ষ্য করেন, ভার্সন ৬ এ আমরা component এর পরিবর্তে element ব্যবহার করছি। এটি অনেক হেল্পফুল একটা ফিচার, এখন আমরা সরাসরি element e প্রপস পাঠাতে পারি।

উদাহরনঃ

React Router v5

<Route exact path="/" component={Home} />
<Route path="/dashboard" render={routeProps => (
    <Dashboard isAdmin={true} />
  )}
/>

React Router v6

<Route path="/" element={<Home />} />
<Route path="dashboard" element={<Dashboard isAdmin={true} />} />

3. Exact এবং strict প্রপ গায়েবুল হাওয়া

ভার্সন ৬ এ সবগুলো রাউট exactly ম্যাচ করে বাই ডিফল্ট তাই extact এবং strict প্রপের প্রয়োজন নেই।

উদাহরনঃ

React Router v5

<Route exact path="/" component={Home} />

React Router v6

<Route path="/" element={<Home />} />

4. Relative paths এবং links

ভার্সন ৬ এ, paths এবং link দূটোই তাদের পেরেন্টে রাউটের সাথে রিলেটিভ। তাই এখন আমাদের রিলেটিভ পাথের প্রয়োজন হলে আমরা “/” ব্যবহার করা ছাড়াই সেটা করতে পারি।

উদাহরনঃ

React Router v5

<Route exact path="/" component={Home} />
<Route path="/dashboard" component={Dashboard} />

React Router v6

<Route path="/" element={<Home />} />
<Route path="dashboard" element={<Dashboard />} />

5. Nested Routes এখন আরো সহজ

রেগুলার রিয়েক্ট এলিমেন্টের মতন এখন শুধু চাইল্ড রাউট গুলোকে পেরেন্ট রাউট দিয়ে র‍্যাপ করে দিলেই হয়ে যাবে নেস্টেড রাউট।

উদাহরনঃ

React Router v5

<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
// ....
users.js
import { useRouteMatch } from 'react-router-dom';
const Users = () => {
  const { path } = useRouteMatch();
return (
    <div>
      <Switch>
        <Route path={`${path}/:id`} component={UserInfo} />
        <Route path={`${path}/profile`} component={UserProfile} />
      </Switch>
    </div>
  );
}

React Router v6

<Route path="/" element={<Home />} />
<Route path="users" element={<Users />}>
  <Route path=":id" element={<UserInfo />} />
  <Route path="profile" element={<UserProfile />} />
</Route>
// ....
users.js
import { Outlet } from 'react-router-dom';
const Users = () => {
  return (
    <div>
      <Outlet/>
    </div>
  );
}

6. useHistory এর পরিবর্তে এসেছে useNavigte

useHistory কে গায়েবুল হাওয়া করে দিয়ে এর পরিবর্তে চলে এসেছে আরো বেশি পাওয়ারফুল এবং ফিচার প্যাকড useNavigate হুক।

উদাহরনঃ

React Router v5

import { useHistory } from 'react-router-dom';
const CustomButton = props => {
  const history = useHistory();
  const handleClick = () => {
    history.push('/users');
  }
  return <button onClick={handleClick}>{props.label}</button>;
}

React Router v6

import { useNavigate } from 'react-router-dom';
const CustomButton = props => {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/users');
  }
  return <button onClick={handleClick}>{props.label}</button>;
}

7. আরো বেশি অপটিমাইজড, আরো বেশি পাওয়ারফুল

ভার্সন ৫ এর চেয়ে ভার্সন ৬ অনেক বেশি পাওয়ারফুল এবং ফিচার সমৃদ্ব হওয়ার পরেও এর সাইজ ভার্সন ৫ এর প্রায় অর্ধেকেরও কম।

ভার্সন ৫ঃ ২৮.৪ kb

ভার্সন ৬ঃ ১০.২ kb

Comments

[Hridoy Mozumder]

বাংলায় লেখা দেখে খুব ভালো লাগলো। আশা করি কন্টিনিউ করবেন।