রিয়েক্ট রাউটার ডম v6 - Changes & Updates
Tags: react, javascript, webdev
Published: 2021-12-10 08:20:57

সম্প্রতি 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>` এর প্রায় সব বৈশিষ্ট্য থাকার পাশাপাশি বেশ কিছু এক্সটা ফিচার রয়েছে।

**উদাহরনঃ**

**<u>React Router v5</u>**

```
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>
  );
}
```

**<u>React Router v6</u>**

```
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  প্রপস পাঠাতে পারি।

**উদাহরনঃ**

<u>**React Router v5**</u>

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

**<u>React Router v6</u>**

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


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

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

**উদাহরনঃ** 

**<u>React Router v5</u>**

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

**<u>React Router v6</u>**

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

## 4.  Relative paths এবং links

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

**উদাহরনঃ** 

**<u>React Router v5</u>**

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

**<u>React Router v6</u>**

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


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

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

**উদাহরনঃ**

**<u>React Router v5</u>**

```
<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>
  );
}
```


**<u>React Router v6</u>**

```
<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 হুক।

**উদাহরনঃ** 

**<u>React Router v5</u>**

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

**<u>React Router v6</u>**

```
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`