Reactjs route für asterisk führt nur einmal aus

Question

Ich habe eine einzelne Seite App, ich habe alle Routen in der App definiert, um die gleiche reagierende Komponente (mit * -Wildcard) beim Navigieren zu ihnen auszuführen.

Es scheint, dass die Komponente nur einmal bei der Navigation ausgeführt wird.

Wie kann ich bei jeder Navigationsänderung eine Ausführung/Instanziierung der Komponente aufrufen?

dies mein Weg jsx ist:

<Route path="/" component={App}>  
    {<IndexRoute component={TVPage} />}  
    {<Route path="*" component={TVPage} />} 
</Route> 

Answer 1

Ich gehe davon aus, wenn Sie sagen „die Komponente führt nur einmal“ Sie meinen es nur einmal montiert.

Da Sie Ihren Code nicht angezeigt haben, kann ich nur davon ausgehen, dass Sie einen der lifecycle methods: componentWillMount | componentDidMount

Diese Methoden werden nur einmal beim Montieren von Komponenten ausgelöst. Wenn Sie bei Ihrer Route-Konfiguration zu einer anderen URL wechseln, wird sie nicht mehr unmounten und erneut mounten (daher wird Ihre Ladelogik nur einmal ausgelöst), sondern einfach erneut gerendert, wenn sich ihre Props geändert haben. Deshalb sollten Sie eine Lifecycle-Methode anschließen, die bei jeder Prop-Änderung ausgelöst wird (wie componentWillReceiveProps).

Versuchen Sie stattdessen:

class TVPage extends Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    componentWillMount() { 
 
     // Load your data/state (initial) 
 
     this.props.loadMyData(this.props.whatever.data); 
 
    } 
 

 
    componentWillReceiveProps(nextProps) { 
 
     if (this.props.whatever.myStatus !== nextProps.whatever.myStatus) { 
 
      // Load your data/state (any page change) 
 
      nextProps.loadMyData(nextProps.whatever.data); 
 
     } 
 
    } 
 

 
    render() { 
 
     // Render whatever you want here 
 
    } 
 
}

componentWillMount auf dem Berg (Anfangslast) auslösen, und componentWillReceiveProps löst zumindest jedes Mal Ihre Requisiten ändern.

Answer 2

Schauen Sie sich das Beispiel für reagieren Router Abfrage params mit: https://github.com/reactjs/react-router/blob/master/examples/query-params/app.js

In Ihrer componentDidMount Funktion in Ihrem TVPage Komponente, würde ich die Daten als params übergeben bekommen in der URL, die dann den Zustand der Komponente aktualisiert. Jedes Mal, wenn sich der Status innerhalb der Komponente ändert, wird er sich neu laden.

Beispiel Komponente:

class TVPage extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: null 
    } 
    } 

    componentDidMount() { 
    // from the example path /TVPage/:id 
    let urlData = this.props.params.id; 
    this.setState({data: urlData}) 

    } 

    render() { 
    return (
     <div> 
     {this.state.data} 
     </div> 
    ); 
    } 

}