Reactjs route for asterisk executes only once - reactjs

Question

I have a single page app, I have defined all the Routes in the app to execute the same react component (using *-wildcard) when navigating to them.
it seems that the component will only execute once upon navigation.
How can I call an execution/instantiation of the component upon any change in navigation?
this is my Route jsx:
<Route path="/" component={App}>
{<IndexRoute component={TVPage} />}
{<Route path="*" component={TVPage} />}
</Route>

Answer 1

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.

Answer 2

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