Reactjs route for asterisk executes only once

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.

Reactjs route for asterisk executes only once

Sign up