प्रतिक्रिया-राउटर में 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.
हालाँकि ये समाधान URL में मैन्युअल रूप से बदलते समय पूरी तरह से काम नहीं करता है
इस अर्थ में कि
- हम पुष्टि करते हैं - ठीक है
- पृष्ठ में पुनः लोड नहीं है - ठीक है
- URL बदलता नहीं है - ठीक नहीं है
react-router v4शीघ्र या कस्टम इतिहास का उपयोग करने के लिए :
हालाँकि react-router v4, इसके ' Promptफ्रॉम' राउटर की मदद से लागू करना आसान है
प्रलेखन के अनुसार
प्रेरित करना
एक पृष्ठ से दूर नेविगेट करने से पहले उपयोगकर्ता को संकेत देने के लिए उपयोग किया जाता है। जब आपका एप्लिकेशन एक ऐसी स्थिति में प्रवेश करता है, जो उपयोगकर्ता को दूर नेविगेट करने से रोकना चाहिए (जैसे एक फॉर्म आधा भरा हुआ है), एक रेंडर करें <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 } }आप अपने प्रकाशन फ़ंक्शन को पेज छोड़ने के लिए कह सकते हैं