11

Tarama geçmişine bağlı olarak bazı iş mantığını uygulamak zorundayım.Rota Değişimi Reaktif yönlendiriciyle Tespit Etme

böyle bir şey Ne yapmak istiyorum:

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

URL tepki-yönlendirici güncellendiğinde bir geri almak için herhangi bir yolu var mı?

+0

hangi sürümü: Sonra onun listen() yöntemiyle dinleyebilirsiniz tepki-yönlendirici kullanıyor musunuz? Bu en iyi yaklaşımı belirleyecektir.Geliştirdiğinizde bir cevap vereceğim.Onun söylendiği gibi [withRouter] (https://reacttraining.com/react-router/web/api/withRouter) HoC, muhtemelen bir bileşen konumunun farkında olmanız için en iyi seçeneğidir.Yeni bir değişiklik olduğunda, bileşeninizi yeni ({match, history, and location}) güncelleyecektir.Bu şekilde, etkinliklere manuel olarak abone olmanız ve aboneliğinizi iptal etmeniz gerekmez. Anlamı kolaydır işlevsel bileşensiz bileşenlerin yanı sıra sınıf bileşenleriyle birlikte kullanın. –

cevap

12

Rota değişikliğini saptamaya çalışırken history.listen() işlevinden yararlanabilirsiniz. react-router v4'u kullandığınız düşünülürse, history desteğine erişmek için bileşeninizi withRouter HOC ile sarın.

history.listen(), bir unlisten işlevini döndürür. Bunu unregister dinlemeden kullanacaksınız.

:

Sen

index.jsAppContainer.js tarihin docs itibaren

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); 

sonra

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

ve sevdiği yolları yapılandırabilirsiniz

kullanarak bulunduğunuz yerin değişiklikleri işler yapabilirsiniz history.listen:

konum nesne dahil window.location arayüzünün bir alt kümesini uygulayan

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

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

yerler Aşağıdaki özelliklere sahip olmalısınız:

location.state - URL'de bulunan yoksa bu konum için bazı ekstra devlet

location.key (createBrowserHistory ve createMemoryHistory desteklenen) - (desteklenen createBrowserHistory içinde ve createMemoryHistory) bu konumu temsil eden bir benzersiz dize

eylemdir Kullanıcının adresinin mevcut URL'ye nasıl bağlı olduğuna bağlı olarak PUSH, REPLACE, or POP'dan biri.

Yukarıda belirtildiği gibi history paketinden history.listen() yararlanabilirler ya da kullanım yapabilirsiniz v3-yönlendirici tepki kullanıyorsunuz browserHistory.listen()

yapılandırabilir ve

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> 
     ) 
    } 
} 
sevdiği yolları kullanabilirsiniz
+0

3. versiyondayım. Aynı zamanda 3. sürüm için de çalışıyor mu? – Aris

+0

Cevabım –

+0

cevabım v3 kullanıyor ve cevabınızın ikinci cümlesinin "_Considering'i kullandığınız" tepki-yönlendirici v4'_ "yazıyor –

2

Dünya çapında history nesnesini dinlemek istiyorsanız, bunu kendiniz oluşturmanız ve Router ürününe aktarmanız gerekir.size kolayca her yere alabilirsiniz böylece lazım olabilir, modül olarak tarih nesnesi oluşturursanız

// 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> 

Daha da iyisi (örneğin import history from './history';

İlgili konular