This content originally appeared on DEV Community and was authored by Shakil Ahmed Atik
সম্প্রতি 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 ভার্সন ৬ এ রিমুভ করে এর পরিবর্তে আনা হয়েছে। এটিতে এর প্রায় সব বৈশিষ্ট্য থাকার পাশাপাশি বেশ কিছু এক্সটা ফিচার রয়েছে।
উদাহরনঃ
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
This content originally appeared on DEV Community and was authored by Shakil Ahmed Atik
Shakil Ahmed Atik | Sciencx (2021-12-10T08:20:57+00:00) রিয়েক্ট রাউটার ডম v6 – Changes & Updates. Retrieved from https://www.scien.cx/2021/12/10/%e0%a6%b0%e0%a6%bf%e0%a7%9f%e0%a7%87%e0%a6%95%e0%a7%8d%e0%a6%9f-%e0%a6%b0%e0%a6%be%e0%a6%89%e0%a6%9f%e0%a6%be%e0%a6%b0-%e0%a6%a1%e0%a6%ae-v6-changes-updates/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.