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
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. –