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

Question

के साथ रूट परिवर्तन का पता लगाएं मुझे ब्राउज़िंग इतिहास के आधार पर कुछ व्यावसायिक तर्क लागू करना होगा।

कुछ इस तरह मुझे क्या करना चाहते हैं:

reactRouter.onUrlChange(url => { 
    this.history.push(url); 
}); 

वहाँ किसी भी तरह से से प्रतिक्रिया रूटर जब URL अद्यतन हो जाता है एक कॉलबैक प्राप्त करने के लिए है?

Answer 1

आप मार्ग परिवर्तन का पता लगाने की कोशिश करते समय history.listen() फ़ंक्शन का उपयोग कर सकते हैं। ध्यान दें कि आप react-router v4 का उपयोग कर रहे हैं, history प्रोप तक पहुंच प्राप्त करने के लिए अपने घटक को withRouter एचओसी के साथ लपेटें।

history.listen()unlisten फ़ंक्शन देता है। आप इसे सुनने से unregister पर उपयोग करेंगे।

:

आप

index.js

ReactDOM.render(
     <BrowserRouter> 
      <AppContainer> 
        <Route exact path="/" Component={...} /> 
        <Route exact path="/Home" Component={...} /> 
      </AppContainer> 
     </BrowserRouter>, 
    document.getElementById('root') 
); 

और फिर AppContainer.js

class App extends Component { 

    componentWillMount() { 
    this.unlisten = this.props.history.listen((location, action) => { 
     console.log("on route change"); 
    }); 
    } 
    componentWillUnmount() { 
     this.unlisten(); 
    } 
    render() { 
    return (
     <div>{this.props.children}</div> 
    ); 
    } 
} 
export default withRouter(App); 

इतिहास docs से में की तरह अपने मार्गों कॉन्फ़िगर कर सकते हैं

आप का उपयोग वर्तमान स्थान के परिवर्तन के लिए सुन सकते हैं history.listen:

history.listen((location, action) => { 
     console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`) 
    console.log(`The last navigation action was ${action}`) 
}) 

स्थान वस्तु विंडो स्थान इंटरफ़ेस का एक सबसेट को लागू करता है, जिनमें शामिल हैं:

**location.pathname** - The path of the URL 
**location.search** - The URL query string 
**location.hash** - The URL hash fragment 

स्थान भी कर सकते हैं निम्नलिखित गुण हैं:

location.state - इस स्थान कि यूआरएल में रहते नहीं करता है के लिए कुछ अतिरिक्त राज्य

location.key (createBrowserHistory और createMemoryHistory में समर्थित) - एक अद्वितीय इस स्थान (समर्थित createBrowserHistory में और createMemoryHistory) का प्रतिनिधित्व स्ट्रिंग

कार्रवाई है उपयोगकर्ता वर्तमान URL पर कैसे पहुंचे इस पर निर्भर करता है कि PUSH, REPLACE, or POP में से एक।

जब आप प्रतिक्रिया रूटर v3 आप जैसा कि ऊपर उल्लेख history पैकेज से history.listen() का उपयोग कर सकते हैं या आप भी उपयोग कर सकते हैं का उपयोग कर रहे browserHistory.listen()

आप कॉन्फ़िगर और

import {browserHistory} from 'react-router'; 

class App extends React.Component { 

    componentDidMount() { 
      this.unlisten = browserHistory.listen(location => { 
       console.log('route changes'); 

      }); 

    } 
    componentWillUnmount() { 
     this.unlisten(); 

    } 
    render() { 
     return (
       <Route path="/" onChange={yourHandler} component={AppContainer}> 
        <IndexRoute component={StaticContainer} /> 
        <Route path="/a" component={ContainerA} /> 
        <Route path="/b" component={ContainerB} /> 
      </Route> 
     ) 
    } 
} 

की तरह अपने मार्गों का उपयोग कर सकते

Answer 2

यदि आप वैश्विक स्तर पर history ऑब्जेक्ट को सुनना चाहते हैं, तो आपको इसे स्वयं बनाना होगा और इसे Router पर भेजना होगा।

// Use Router from react-router, not BrowserRouter. 
import { Router } from 'react-router'; 

// Create history object. 
import createHistory from 'history/createBrowserHistory'; 
const history = createHistory(); 

// Listen to history changes. 
// You can unlisten by calling the constant (`unlisten()`). 
const unlisten = history.listen((location, action) => { 
    console.log(action, location.pathname, location.state); 
}); 

// Pass history to Router. 
<Router history={history}> 
    ... 
</Router> 

भी अच्छी बात अगर आप एक मॉड्यूल के रूप में इतिहास वस्तु बनाने, ताकि आप आसानी से इसे कहीं भी आयात कर सकते हैं आप इसे आवश्यकता हो सकती है (जैसे import history from './history';