score:1

Accepted answer

i assume when you say "the component only executes once" you mean it mounts only once.

since you didn't show your code, i can only assume you have used one of the lifecycle methods: componentwillmount | componentdidmount

these methods only trigger once on component mount. given your route configuration, whenever you switch to a different url, since it's using the same component, it will not unmount and mount again (thus your loading logic is only triggered once), but simply re-render if its props have changed. that's why you should plug on a lifecycle method that is triggered on every prop change (like componentwillreceiveprops).

try this instead:

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 will trigger on mount (initial load), and componentwillreceiveprops will trigger at least every time your props change.

score:0

look at this example for react router using query params : https://github.com/reactjs/react-router/blob/master/examples/query-params/app.js

in your componentdidmount function inside your tvpage component, i would get the data passed as params in the url which then updates the state of the component. every time the state changes within the component, it will reload itself.

example component :

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

}

Related Query

More Query from same tag