प्रतिक्रिया-राउटर v4 पर इतिहास कैसे प्राप्त करें?

Question

मैं कुछ छोटी समस्या रिएक्ट-राउटर v3 से v4 की ओर पलायन कर रहा हूं। v3 में मैं कहीं भी ऐसा करने में सक्षम था:

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

मैं इसे v4 में कैसे प्राप्त करूं।

मुझे पता है कि withRouterजब आप एक घटक में होते हैं , तो मैं उसका उपयोग कर सकता हूं, एचओसी , प्रतिक्रिया संदर्भ या घटना राउटर प्रॉप्स का उपयोग कर सकता हूं । लेकिन यह मेरे लिए मामला नहीं है।

मैं v4 में NavigatingOutsideOfCompords के तुल्यता की तलाश कर रहा हूं

Comments

धन्यवाद @ क्रिस, लेकिन जैसा मैंने कहा, मैं घटक में नहीं हूं।

— तूफान_बस्टर

एक उपयोगिता वर्ग में @ क्रिस, कृपया github.com/ReactTraining/react-router/blob/master/docs/guides/… की जाँच करें , यह एक redux

— midwarere

सबसे सरल तरीका stackoverflow.com/a/53916596/3966458

— Saahithyan Vigneswaran

मैंने BrowserRouter का उपयोग रूट कंपोनेंट के रूप में किया। इस तरह से मैं App घटक withRouter का उपयोग कर सकता हूं। जैसा आपने पूछा था वैसा ही नहीं, लेकिन मेरी भी यही आवश्यकताएँ हैं और यह मेरे लिए पर्याप्त है।

— मूर्ख

Answer 1

आपको बस एक मॉड्यूल होना चाहिए जो किसी historyवस्तु को निर्यात करता है। तब आप अपने पूरे प्रोजेक्ट में उस वस्तु को आयात करेंगे।

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

फिर, अंतर्निहित रूटर्स में से एक का उपयोग करने के बजाय, आप <Router>घटक का उपयोग करेंगे ।

// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

// some-other-file.js
import history from './history'
history.push('/go-here')

Comments

आपका बहुत बहुत धन्यवाद! फिलहाल, प्रतिक्रिया-रूटर 4 का उपयोग करते हुए, मुझे इस आयात का उपयोग इतिहास में करना था। इसके बजाय: 'create /rowBrowserHistory' से आयात createBrowserHistory;

— पेटेरबार्टोस

यह मेरे लिए काम किया है जब मैं इतिहास = {इतिहास} रूट में डाल देता हूं और एक सहारा की तरह गुजरता हूं

— नाथ पावा

हम अलग फ़ाइल बनाने के बजाय प्रॉपर्टी के साथ इतिहास का उपयोग कर सकते हैं और प्रॉप्स में इतिहास प्राप्त कर सकते हैं। इस समाधान ने मेरे लिए redux के साथ काम नहीं किया।

— जिल शाह

createHashHistoryयदि आप उपयोग कर रहे थे तो आयात करें HashRouter।

— डेविड हार्कस

@ हसनअज़म आप शायद प्रतिक्रिया-राउटर V5 का उपयोग कर रहे हैं, और यह उत्तर V4 के लिए काम करता है, न कि V5 के लिए। मेरे पास अभी वही चुनौती है, और मैं हर जगह देख रहा हूं, लेकिन यह काम करने में असमर्थ है। history.push घटक के बाहर काम करता है, लेकिन लिंक पर क्लिक नहीं करता है।

— वाटरलिंक

Answer 2

यह काम! https://reacttraining.com/react-router/web/api/withRouter

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

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);

Comments

जब तक आप एक घटक में हैं। मैं

— तूफान_बस्टर

धन्यवाद, यह एक घटक से दूसरे मार्ग से लिंक करने का सबसे आसान और सबसे सरल तरीका है। मैं सिर्फ यह जोड़ना चाहूंगा कि this.props.history.push('/some_route');इसके लिए आपको काम करना होगा।

— dannytenaglias

@storm_buster const Component = props => {... // stuff}और export default withRouter(Component)मेरे लिए एक स्टेटलेस घटक पर काम करता है

— कार्ल टेलर

Answer 3

आपके द्वारा उपयोग की जा सकने वाली चीज़ का उपयोग करने के लिए स्वीकृत उत्तर reactऔर react-routerस्वयं आपको historyऑब्जेक्ट प्रदान करने के लिए जिसे आप किसी फ़ाइल में स्कोप कर सकते हैं और फिर निर्यात कर सकते हैं।

History.js

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

// variable which will point to react-router history
let globalHistory = null;

// component which we will mount on top of the app
class Spy extends React.Component {
  constructor(props) {
    super(props)
    globalHistory = props.history; 
  }

  componentDidUpdate() {
    globalHistory = this.props.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

// export react-router history
export default function getHistory() {    
  return globalHistory;
}

आप बाद में घटक आयात करते हैं और इतिहास चर को आरंभ करने के लिए बढ़ते हैं:

import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';

function render() {
  ReactDOM.render(
    <BrowserRouter>
        <div>
            <GlobalHistory />
            //.....
        </div>
    </BrowserRouter>
    document.getElementById('app'),
  );
}

और तब आप अपने ऐप में आयात कर सकते हैं जब इसे माउंट किया गया हो:

import getHistory from './history'; 

export const goToPage = () => (dispatch) => {
  dispatch({ type: GO_TO_SUCCESS_PAGE });
  getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};

मैंने भी बनाया और npm पैकेज जो बस करता है।

Comments

16.9 अभिकर्मकों के रूप में, यह समाधान कंपोनेंटविलमाउंट और कम्पोनेंटविल्लिसिविवप्रॉप्स पर एक डिप्रेसेशन चेतावनी को थूक देगा।

— इयान

@ian सच है, तय है कि

— टॉमस मल्कज़िक

Answer 4

यदि आप redux और redux-thunk का उपयोग कर रहे हैं तो सबसे अच्छा समाधान अभिक्रिया-राउटर-रेडक्स का उपयोग करना होगा

// then, in redux actions for example
import { push } from 'react-router-redux'

dispatch(push('/some/path'))

कुछ कॉन्फ़िगरेशन करने के लिए डॉक्स देखना महत्वपूर्ण है।

Comments

मैं इस सटीक समाधान को खोजने की उम्मीद में यहाँ आया था, धन्यवाद

— vapurrmaid

Answer 5

यदि आपको किसी अन्य घटक पर नेविगेट करने के लिए केवल इतिहास ऑब्जेक्ट की आवश्यकता है, तो इस उत्तर पर आधारित :

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Comments

गलत, आप एक घटक के भीतर हैं। देखें // कुछ-अन्य-file.js स्वीकृत उत्तर से

— तूफान_बस्टर

Answer 6

App.js में

 import {useHistory } from "react-router-dom";

 const TheContext = React.createContext(null);

 const App = () => {
   const history = useHistory();

   <TheContext.Provider value={{ history, user }}>

    <Switch>
        <Route exact path="/" render={(props) => <Home {...props} />} />
        <Route
          exact
          path="/sign-up"
          render={(props) => <SignUp {...props} setUser={setUser} />}
        /> ...

फिर एक बच्चे के घटक में:

const Welcome = () => {
    
    const {user, history} = React.useContext(TheContext); 
    ....

Answer 7

के विशिष्ट मामले में react-router, का उपयोग contextकरना वैध मामला परिदृश्य है, उदाहरण के लिए

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

  render () {
    this.context.router;
  }
}

आप राउटर संदर्भ के माध्यम से इतिहास के एक उदाहरण का उपयोग कर सकते हैं, जैसे this.context.router.history।

Comments

एक घटक के बाहर होने पर यह प्रश्न विशेष रूप से पूछ रहा है, इसलिए यह विकल्प के रूप में उपलब्ध नहीं है:> "मुझे पता है कि मैं उपयोग कर सकता हूं, जब आप एक घटक में हों, तो रेक राउटर, प्रतिक्रिया संदर्भ, या इवेंट राउटर प्रॉप्स का उपयोग करें। लेकिन मेरे लिए ऐसा नहीं है। ”

— सनशाइनडॉयल नोव