রিঅ্যাক্ট-রাউটারে v2.4.0বা তার উপরে এবং তার আগে v4বেশ কয়েকটি বিকল্প রয়েছে
- এর
onLeaveজন্য ফাংশন যুক্ত করুনRoute
<Route
path="/home"
onEnter={ auth }
onLeave={ showConfirm }
component={ Home }
>
setRouteLeaveHookজন্য ফাংশন ব্যবহার করুনcomponentDidMount
ছুটি হুক দিয়ে কোনও রুট ছাড়ার আগে আপনি কোনও সংক্রমণ ঘটতে বা আটকাতে বা রোধ করতে পারেন।
const Home = withRouter(
React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave)
},
routerWillLeave(nextLocation) {
// return false to prevent a transition w/o prompting the user,
// or return a string to allow the user to decide:
// return `null` or nothing to let other hooks to be executed
//
// NOTE: if you return true, other hooks will not be executed!
if (!this.state.isSaved)
return 'Your work is not saved! Are you sure you want to leave?'
},
// ...
})
)
মনে রাখবেন যে এই উদাহরণটি withRouterউচ্চতর অর্ডার উপাদানটি চালু করেv2.4.0.
তবে ইউআরএলটিতে ম্যানুয়ালি রুট পরিবর্তন করার সময় এই সমাধানগুলি পুরোপুরি কার্যকর হয় না
এই ভেবে যে
- আমরা নিশ্চিতকরণটি দেখতে পাই - ঠিক আছে
- পৃষ্ঠা ধারণ করে পুনরায় লোড হয় না - ঠিক আছে
- ইউআরএল পরিবর্তন হয় না - ঠিক আছে না
react-router v4প্রম্পট বা কাস্টম ইতিহাস ব্যবহারের জন্য :
তবে এতে react-router v4, Promptআরে্যাক্ট-রাউটারের সাহায্যে প্রয়োগ করা বরং আরও সহজ
ডকুমেন্টেশন অনুযায়ী
শীঘ্র
কোনও পৃষ্ঠা থেকে দূরে নেভিগেটের আগে ব্যবহারকারীকে অনুরোধ জানাতে ব্যবহৃত হয়। যখন আপনার অ্যাপ্লিকেশন এমন একটি স্থানে প্রবেশ করে যা ব্যবহারকারীকে চলাচল করা থেকে বিরত রাখতে পারে (যেমন একটি ফর্মটি অর্ধ-ভরাট হয়), তখন রেন্ডার করুন a <Prompt>।
import { Prompt } from 'react-router'
<Prompt
when={formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
বার্তা: স্ট্রিং
ব্যবহারকারীরা যখন নেভিগেট করার চেষ্টা করবে তখন সেই বার্তাটি প্রম্পট করার জন্য।
<Prompt message="Are you sure you want to leave?"/>
বার্তা: ফানক
পরবর্তী অবস্থান এবং ব্যবহারকারীটি নেভিগেট করার চেষ্টা করছে এমন ক্রিয়া সহ ডাকা হবে। ব্যবহারকারীর কাছে প্রম্পট দেখাতে একটি স্ট্রিং ফিরিয়ে দিন বা ট্রানজিশনের অনুমতি দেওয়ার জন্য সত্য।
<Prompt message={location => (
`Are you sure you want to go to ${location.pathname}?`
)}/>
কখন: বুল
শর্তসাপেক্ষে <Prompt>কোনও প্রহরীকে পিছনে রেন্ডার করার পরিবর্তে , আপনি সর্বদা এটি রেন্ডার করতে পারেন তবে পাস করতে পারেন when={true}বা when={false}সেই অনুযায়ী নেভিগেশনকে আটকাতে বা অনুমতি দিতে পারেন।
আপনার রেন্ডার পদ্ধতিতে আপনার প্রয়োজন অনুসারে ডকুমেন্টেশনে উল্লিখিতভাবে আপনাকে এটি যুক্ত করতে হবে।
হালনাগাদ:
আপনি যখন পৃষ্ঠাটি ছেড়ে যাচ্ছেন তখন আপনি কোনও কাস্টম পদক্ষেপ নিতে চান, আপনি কাস্টম ইতিহাস ব্যবহার করতে পারেন এবং আপনার রাউটারের মতো কনফিগার করতে পারেন
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export const history = createBrowserHistory()
...
import { history } from 'path/to/history';
<Router history={history}>
<App/>
</Router>
এবং তারপরে আপনার উপাদানটিতে আপনি history.blockপছন্দ মতো ব্যবহার করতে পারেন
import { history } from 'path/to/history';
class MyComponent extends React.Component {
componentDidMount() {
this.unblock = history.block(targetLocation => {
// take your action here
return false;
});
}
componentWillUnmount() {
this.unblock();
}
render() {
//component render here
}
}
componentWillUnmount() { if (confirm('Changes are saved, but not published yet. Do that now?')) { // publish and go away from a specific page } else { // do nothing and go away from a specific page } }যাতে আপনি পৃষ্ঠাটি ছেড়ে আপনার প্রকাশিত ফাংশনটিকে কল করতে পারেন