reactjs - प्रतिक्रिया राउटर का उपयोग करके प्रोग्रामेटिक रूप से नेविगेट करें

react-router (19)

अभिक्रिया राउटर V4

tl: डॉ;

if (navigate) {
  return <Redirect to="/" push={true} />
}

सरल और घोषणात्मक उत्तर यह है कि आपको setState() साथ संयोजन में <Redirect to={URL} push={boolean} /> का उपयोग करने की आवश्यकता है

पुश: बूलियन - जब सही होगा, पुनर्निर्देशन वर्तमान को बदलने के बजाय इतिहास पर एक नई प्रविष्टि को आगे बढ़ाएगा।

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

पूरा उदाहरण here । here और पढ़ें

पुनश्च। उदाहरण स्थिति को इनिशियलाइज़ करने के लिए ES7 + प्रॉपर्टी इनिशियलाइज़र का उपयोग करता है। यदि आप रुचि रखते हैं तो here भी देखें।

react-router मैं Link तत्व का उपयोग लिंक बनाने के लिए कर सकता हूं जो कि प्रतिक्रिया रूटर द्वारा मूल रूप से नियंत्रित किया जाता है।

मैं आंतरिक रूप से इसे इस कॉल को this.context.transitionTo(...) ।

मैं एक नेविगेशन करना चाहता हूं, लेकिन लिंक से नहीं, उदाहरण के लिए ड्रॉपडाउन चयन से। मैं इसे कोड में कैसे कर सकता हूं? यह क्या है। this.context

मैंने Navigation मिक्सिन को देखा, लेकिन क्या मैं मिक्सी के बिना ऐसा कर सकता हूं?

प्रतिक्रिया के लिए रूटर v4 +

यह मानते हुए कि आपको प्रारंभिक रेंडर के दौरान नेविगेट करने की आवश्यकता नहीं होगी (जिसके लिए आप <Redirect> घटक का उपयोग कर सकते हैं ), यह वही है जो हम अपने ऐप में कर रहे हैं।

एक खाली मार्ग को परिभाषित करें जो अशक्त देता है, इससे आपको इतिहास ऑब्जेक्ट तक पहुंच प्राप्त करने की अनुमति मिलेगी। आपको इसे शीर्ष स्तर पर करने की आवश्यकता है जहां आपका Router परिभाषित किया गया है।

अब आप वे सभी काम कर सकते हैं जो history पर किए जा सकते हैं history.push() , जैसे history.replace() , history.go(-1) आदि!

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

let routeHistory = null;

export function navigateTo(path) {
  if(routeHistory !== null) {
    routeHistory.push(path);
  }
}

export default function App(props) {
  return (
    <HashRouter hashType="noslash">
      <Route
        render={({ history }) => {
          routeHistory = history;
          return null;
        }}
      />
      {/* Rest of the App */}
    </HashRouter>
  );
}

चेतावनी: यह उत्तर 1.0 से पहले केवल रीक्रिएट राउटर संस्करणों को शामिल करता है

मैं इस उत्तर को 1.0.0-rc1 उपयोग मामलों के बाद अपडेट करूंगा!

आप इसे मिक्सी के बिना भी कर सकते हैं।

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

संदर्भों के साथ contextTypes यह है कि यह तब तक सुलभ नहीं है जब तक कि आप contextTypes को परिभाषित नहीं करते हैं वर्ग पर।

जैसा कि संदर्भ के लिए है, यह एक वस्तु है, प्रॉप्स की तरह, जो कि माता-पिता से बच्चे के लिए निधन हो जाता है, लेकिन हर बार प्रॉप्स को फिर से विभाजित करने के बिना, इसे संक्षेप में पारित किया जाता है। https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html देखें

प्रतिक्रिया-राउटर 4.0.0+ उत्तर

4.0 और इसके बाद के संस्करण में, अपने घटक के एक प्रारूप के रूप में इतिहास का उपयोग करें।

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

नोट: यह। मामले में आपके घटक <Route> द्वारा प्रदान नहीं किए गए मामले में मौजूद नहीं है। आपको इस <Route path="..." component={YourComponent}/> उपयोग करना चाहिए <Route path="..." component={YourComponent}/>

प्रतिक्रिया-राउटर 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')

आगे पढ़ने: Histories और Navigation

प्रतिक्रिया-राउटर 1.xx उत्तर

मैं उन्नयन के विवरण में नहीं जाऊंगा। आप इस बारे में अपग्रेड गाइड में पढ़ सकते हैं

यहां प्रश्न के बारे में मुख्य परिवर्तन नेविगेशन मिक्सिन से इतिहास में परिवर्तन है। अब यह मार्ग बदलने के लिए ब्राउज़र हिस्ट्रीएपीआई का उपयोग कर रहा है इसलिए हम अभी से pushState() उपयोग करेंगे।

यहां मिक्सिन का उपयोग करने की छूट है:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

ध्यान दें कि यह History rackt/history परियोजना से आता है। रिएक्ट-राउटर से ही नहीं।

यदि आप किसी कारणवश (शायद ES6 वर्ग के कारण) मिक्सिन का उपयोग नहीं करना चाहते हैं, तो आप इस राउटर से प्राप्त इतिहास को एक्सेस कर सकते हैं। यह केवल आपके राउटर द्वारा प्रस्तुत किए गए घटकों के लिए सुलभ होगा। इसलिए, यदि आप इसे किसी भी बच्चे के घटकों में उपयोग करना चाहते हैं, तो इसे props माध्यम से एक विशेषता के रूप में पारित किया जाना चाहिए।

आप उनके 1.0.x प्रलेखन में नई रिलीज़ के बारे में अधिक पढ़ सकते हैं

यहां आपके घटक के बाहर नेविगेट करने के बारे में विशेष रूप से एक सहायता पृष्ठ है

यह एक संदर्भ history = createHistory() को हथियाने और उस पर replaceState को कॉल करने की 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>);
  }
});

मैं .context तक पहुँचने की आवश्यकता के बिना transitionTo() कॉल करने में सक्षम था

या आप फैंसी 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 के लिए React-Router-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>

प्रतिक्रिया-राउटर v2

सबसे हालिया रिलीज ( v2.0.0-rc5 ) के लिए, अनुशंसित नेविगेशन विधि सीधे इतिहास सिंगलटन पर जोर दे रही है। आप देख सकते हैं कि घटक के बाहर नेविगेट करने की क्रिया में doc ।

प्रासंगिक अंश:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

यदि नए प्रतिक्रिया-राउटर API का उपयोग किया जाता है, तो आपको this.props से history का उपयोग करने की आवश्यकता है। घटकों के अंदर होने पर this.props करें:

this.props.history.push('/some/path');

यह pushState भी प्रदान करता है, लेकिन प्रति लॉग इन चेतावनियों को घटाया जाता है।

यदि react-router-redux का उपयोग किया जाता है, तो यह एक push फ़ंक्शन प्रदान करता है जिसे आप इस तरह भेज सकते हैं:

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

हालाँकि इसका उपयोग केवल URL को बदलने के लिए किया जा सकता है, न कि वास्तव में पेज पर नेविगेट करने के लिए।

रिएक्ट-राउटर v4 और ES6 में

आप withRouter और withRouter उपयोग कर सकते हैं।

import {withRouter} from 'react-router-dom';

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

प्रतिक्रिया-राउटर V4

यदि आप संस्करण 4 का उपयोग कर रहे हैं, तो आप मेरी लाइब्रेरी (बेशर्म प्लग) का उपयोग कर सकते हैं, जहां आप बस एक कार्रवाई भेजते हैं और सब कुछ बस काम करता है!

import createHistory from 'history/createBrowserHistory'

export default createHistory()

trippler

बस उपयोग करें this.props.history.push('/where/to/go');

यह मेरे लिए काम करता है, किसी विशेष आयात की आवश्यकता नहीं है:

<input type="button" name="back" id="back" class="btn btn-primary" value="Back" onClick={() => { this.props.history.goBack() }} />

लेखन के समय मेरे लिए सही उत्तर था

this.context.router.history.push('/');

लेकिन आपको अपने घटक में PropTypes जोड़ने की आवश्यकता है

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

PropTypes आयात करना न भूलें

import PropTypes from 'prop-types';

ES6 + रिएक्ट घटकों के लिए, निम्नलिखित समाधान ने मेरे लिए काम किया।

मैंने फेल्पी स्किनर का पालन किया, लेकिन मेरे जैसे शुरुआती लोगों की मदद करने के लिए अंत समाधान के लिए एक अंत जोड़ा।

नीचे मेरे द्वारा उपयोग किए गए संस्करण हैं:

"प्रतिक्रिया-राउटर": "^ 2.7.0"

"प्रतिक्रिया": "^ 15.3.1"

नीचे मेरी प्रतिक्रिया घटक है जहां मैंने प्रतिक्रिया-राउटर का उपयोग करके प्रोग्रामेटिक नेविगेशन का उपयोग किया है:

import React from 'react';

class loginComp extends React.Component {
   constructor( context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage(){
        this.context.router.replace('/home');
  }

  render(){
    return <div>
           // skipping html code 
             <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
    </div>;
  }
};

 loginComp.contextTypes = {
    router: React.PropTypes.object.isRequired
 }

 module.exports = loginComp;

नीचे मेरे राउटर के लिए विन्यास है:

 import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

 render(<Router history={browserHistory}>
          <Route path='/' component={ParentComp}>
            <IndexRedirect to = "/login"/>
            <Route path='/login' component={LoginComp}/>
            <Route path='/home' component={HomeComp}/>
            <Route path='/repair' component={RepairJobComp} />
            <Route path='/service' component={ServiceJobComp} />
          </Route>
        </Router>, document.getElementById('root'));

इसके लिए, जो सर्वर साइड को नियंत्रित नहीं करता है और इस वजह से हैश राउटर v2 का उपयोग कर रहा है:

अपना history अलग फ़ाइल में रखें (जैसे app_history.js ES6):

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

और हर जगह इसका उपयोग करें!

प्रतिक्रिया-राउटर के लिए आपका प्रवेश बिंदु (app.js ES6):

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

किसी भी घटक (ES6) के अंदर आपका नेविगेशन:

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); // login failed
  } else {
    // logged in
    appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
  }
})

क्षितिज पर रिएक्ट-राउटर v4 के साथ, अब ऐसा करने का एक नया तरीका है।

import { MemoryRouter, BrowserRouter } from 'react-router';

const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;

<Router location="/page-to-go-to"/>

react-lego एक उदाहरण ऐप है जो दिखाता है कि प्रतिक्रिया-राउटर का उपयोग / अपडेट कैसे करें और इसमें उदाहरण कार्यात्मक परीक्षण शामिल हैं जो ऐप को नेविगेट करते हैं।

नेविगेशन को प्रोग्रामिक रूप से करने के लिए, आपको अपने component में एक नए इतिहास को प्रॉपर.हिस्टॉर पर धकेलना होगा , इसलिए ऐसा कुछ आपके लिए काम कर सकता है:

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

प्रतिक्रिया में राउटर v4। मैं प्रोग्रामेटिक तरीके से रूट करने के लिए इस दो तरीके का पालन करता हूं।

1. this.props.history.push("/something/something")
2. this.props.history.replace("/something/something")

नंबर दो

इतिहास स्टैक पर वर्तमान प्रविष्टि को बदलता है

प्रॉप्स में इतिहास पाने के लिए आपको अपने कंपोनेंट को लपेटना पड़ सकता है

withRouter

मैंने कुछ करने से पहले सही तरीके से काम करने के कम से कम 10 तरीके आज़माए!

@ फेलिप स्किनर का withRouter जवाब मेरे लिए थोड़ा भारी था, और मुझे यकीन नहीं था कि मैं नए "ExportedWithRouter" वर्ग के नाम बनाना चाहता हूं।

यहाँ यह करने के लिए सबसे सरल और साफ तरीका है, लगभग मौजूदा रिएक्ट-राउटर 3.0.0 और ES6:

रिएक्ट-राउटर 3.xx ES6 के साथ:

import { withRouter } from 'react-router';

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

// Export the decorated class
export default withRouter(Example);

या, यदि यह आपका डिफ़ॉल्ट वर्ग नहीं है, तो निर्यात करें:

withRouter(Example);
export { Example };

ध्यान दें कि 3.xx में, <Link> घटक router.push का उपयोग कर router.push , इसलिए आप इसे कुछ भी पास कर सकते हैं आप <Link to= टैग, जैसे:

   this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'

यहां बताया गया है कि आप ES6 साथ react-router v2.0.0 साथ ऐसा कैसे करते हैं। react-router से दूर चला गया है।

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

वर्तमान प्रतिक्रिया संस्करण (15.3) के साथ, this.props.history.push('/location'); मेरे लिए काम किया है, लेकिन यह निम्नलिखित चेतावनी दिखाया:

browser.js: 49 चेतावनी: [प्रतिक्रिया-रूटर] props.history और context.history . props.history पदावनत हैं। कृपया context.router उपयोग करें।

और मैंने इसे context.router इस तरह से हल किया :

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.backPressed = this.backPressed.bind(this);
    }

    backPressed() {
        this.context.router.push('/back-location');
    }

    ...
}

MyComponent.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default MyComponent;

सरल प्रतिक्रिया रूटिंग:

codesandbox

मेरे कोड सैंडबॉक्स से लिंक करें। इसमें कुछ अन्य सरल प्रतिक्रिया-रिडक्स कार्यक्रम हैं।