Reagieren Router onChange

Question

Wie man neue Requisiten übergeben, wenn Route geändert? Ich brauche Wechselklasse abhängig von der Route.

export class Routes extends React.Component<any, any> { 
constructor(props:any){ 
    super(props); 
} 
handleChange = (prevState, nextState, replaceState) => { 
    console.log(nextState.location.pathname); 
}; 
render(){ 
    return(
     <Router {...this.props}> 
      <Route path="/" onChange={this.handleChange} component={Miramir}> 
       <Route path="/about"> 
        <IndexRoute component={Miramir}></IndexRoute> 
       </Route> 
       <Route path="/contact"> 
        <IndexRoute component={Miramir}></IndexRoute> 
       </Route> 
       <Route path="/profile"> 
        <IndexRoute component={Profile} /> 
        <Route path="/profile/update" component={ProfileUpdate} /> 
        <Route path="/profile/login" component={LogInPage} /> 
       </Route> 
      </Route> 
     </Router> 
    ) 
    } 
} 

Ich versuche Requisiten in meinem Miramir Komponente zu erhalten und location.pathname

Zum Beispiel überprüfen: Auf meinem Weg/i Header-Klasse will home-page und/profile Route wollen profile-page Klasse. Aber wenn ich die Routen ändere location.pathname hat / Route

Wie Update-Requisiten zu überprüfen?

Ich brauche nextState.location.pathname in meiner Miramir Komponente

Answer 1

Sie onEnter Haken bereitstellen kann, wenn Route verändern wird.

zB

<Route 
    path="/profile/update" 
    component={ProfileUpdate} 
    onEnter={onProfileUpdate} 
/> 

Dann Sie diese Funktion definieren können onProfileUpdate

function onProfileUpdate(nextState, replace, callback) { 

    replace({ 
     pathname: '/transition path name here', 
     state: { nextPathname: nextState.location.pathname } 
    }); 

} 

Answer 2

Wenn Ihre Komponente eine Route Komponente ist, wie es in Ihrem Fall ist, wird es einige Requisiten hinein injiziert bekommen durch der Router selbst. Sie erhalten Ihren aktuellen Standort, Parameter usw., so dass Sie einfach das in Ihrer render Methode lesen und entsprechend handeln können.

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#injected-props

Wenn Sie etwas in einer Komponente zugreifen müssen tiefer in Ihrem Baum leben, könnten Sie es wickeln mit dem withRouter HOC.

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options