प्रतिक्रिया-राउटर 5.1.0+ उत्तर (हुक और प्रतिक्रिया का उपयोग करके> 16.8)
आप useHistoryकार्यात्मक घटकों पर नए हुक का उपयोग कर सकते हैं और प्रोग्रामेटिक रूप से नेविगेट कर सकते हैं:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
प्रतिक्रिया-राउटर 4.0.0+ उत्तर
4.0 और इसके बाद के संस्करण में, अपने घटक के एक प्रारूप के रूप में इतिहास का उपयोग करें।
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
ध्यान दें: यह। मामले में आपके घटक द्वारा प्रस्तुत नहीं किए जाने की स्थिति में मौजूद नहीं है <Route>। आपको <Route path="..." component={YourComponent}/>YourComponent में इस .props.history का उपयोग करना चाहिए
प्रतिक्रिया-राउटर 3.0.0+ उत्तर
3.0 और इसके बाद के संस्करण में, अपने घटक के एक प्रोप के रूप में राउटर का उपयोग करें।
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
प्रतिक्रिया-राउटर 2.4.0+ उत्तर
2.4 और इसके बाद के संस्करण में, अपने कंपोनेंट के प्रॉप के रूप में राउटर प्राप्त करने के लिए एक उच्च ऑर्डर कंपोनेंट का उपयोग करें।
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
प्रतिक्रिया-राउटर 2.0.0+ उत्तर
यह संस्करण 1.x के साथ पीछे की ओर संगत है, इसलिए अपग्रेड गाइड की कोई आवश्यकता नहीं है। केवल उदाहरणों के माध्यम से जाना काफी अच्छा होना चाहिए।
यदि आप नए पैटर्न पर स्विच करना चाहते हैं, तो कहा कि, राउटर के अंदर एक ब्राउज़रहिस्टर मॉड्यूल है जिसे आप एक्सेस कर सकते हैं
import { browserHistory } from 'react-router'
अब आपके पास अपने ब्राउज़र इतिहास तक पहुंच है, इसलिए आप पुश, रिप्लेस, आदि जैसी चीजें कर सकते हैं ... जैसे:
browserHistory.push('/some/path')
आगे पढ़ने:
इतिहास और
नेविगेशन
प्रतिक्रिया-राउटर 1.xx उत्तर
मैं उन्नयन के विवरण में नहीं जाऊंगा। आप इस बारे में अपग्रेड गाइड में पढ़ सकते हैं
यहां प्रश्न के बारे में मुख्य परिवर्तन नेविगेशन मिक्सिन से इतिहास में परिवर्तन है। अब यह मार्ग बदलने के लिए ब्राउज़र हिस्ट्रीएपीआई का उपयोग कर रहा है इसलिए हम pushState()अभी से उपयोग करेंगे ।
यहां मिक्सिन का उपयोग करने की छूट है:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
ध्यान दें कि यह रैक्ट / इतिहास परियोजना Historyसे आता है । रिएक्ट-राउटर से ही नहीं।
यदि आप किसी कारण के लिए (शायद ES6 वर्ग के कारण) मिक्सिन का उपयोग नहीं करना चाहते हैं, तो आप उस इतिहास तक पहुंच सकते हैं जो आपको राउटर से मिलता है this.props.history। यह केवल आपके राउटर द्वारा प्रस्तुत किए गए घटकों के लिए सुलभ होगा। इसलिए, यदि आप इसे किसी भी बाल घटक में उपयोग करना चाहते हैं तो इसे एक विशेषता के रूप में नीचे पारित करने की आवश्यकता है props।
आप उनके 1.0.x प्रलेखन में नई रिलीज़ के बारे में अधिक पढ़ सकते हैं
यहां आपके घटक के बाहर नेविगेट करने के बारे में विशेष रूप से एक सहायता पृष्ठ है
यह एक संदर्भ को हथियाने history = createHistory()और replaceStateउस पर कॉल करने की सिफारिश करता है।
प्रतिक्रिया-रूटर 0.13.x उत्तर
मैं एक ही समस्या में पड़ गया और केवल नेविगेशन मिक्सिन के साथ समाधान पा सकता था जो प्रतिक्रिया-राउटर के साथ आता है।
यहाँ है कि मैं यह कैसे किया
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
मैं transitionTo()एक्सेस करने की आवश्यकता के बिना कॉल करने में सक्षम था.context
या आप फैंसी ES6 की कोशिश कर सकते हैं class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
प्रतिक्रिया-रूटर-Redux
नोट: यदि आप Redux का उपयोग कर रहे हैं, तो एक और परियोजना है, जिसे React-Router-Redux कहा जाता
है, जो आपको ReactRouter के लिए Redux बाइंडिंग देता है, कुछ उसी दृष्टिकोण का उपयोग करके जो कि
React-Redux करता है
रिएक्ट-राउटर-रेडक्स में कुछ तरीके उपलब्ध हैं जो एक्शन क्रिएटर्स के अंदर से सरल नेविगेट करने की अनुमति देते हैं। ये उन लोगों के लिए विशेष रूप से उपयोगी हो सकते हैं जिनके पास रिएक्ट नेटिव में मौजूदा आर्किटेक्चर है, और वे कम से कम बायलरप्लेट ओवरहेड के साथ रिएक्ट वेब में समान पैटर्न का उपयोग करना चाहते हैं।
निम्नलिखित विधियों का अन्वेषण करें:
push(location)replace(location)go(number)goBack()goForward()
यहां एक उदाहरण उपयोग है, Redux-Thunk के साथ :
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>