React-router - Link firing too soon
<p>I have just begun to integrate react-router into my application, and it's working like a charm. However, I do have one small problem. At one point I need to click on a button which changes to a different page but also needs to make an action call (which goes to the server and gets the data to be shown in the table). At the moment the react-router link is firing before the action and therefore breaking the app at this point, as there is no data to map through!</p>

<p>My question is how I can change the order in which these events happen so that there is data present in a store (updated by the action) when the page is changed?</p>

<p>Current code block:</p>

<pre><code>import React from 'react';
import { Link } from 'react-router';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import { getTable } from '../../actions/DALIActions';
import TokenStore from '../../stores/TokenStore';
import TableStore from '../../stores/TableStore';

const styles = {
    root: {
        paddingTop: 200,
        width: '100%',
    },
    headerStyle: {
        textAlign: 'center',
    },
    container: {
        border: 'solid 1px #d9d9d9',
        height: 500,
        overflow: 'hidden',
    },
};

class MainTablePage extends React.Component {

    getTable(id) {
        getTable(TokenStore.getToken(), id);
    }

    addTables() {
        let tableArray = TableStore.getTables().objects;
        console.log(tableArray);
        let tableList = tableArray.map((el, i) =&gt; {
            return (
                &lt;ListItem
                    key={i}
                    id={el.id}
                    primaryText={el.title}
                    leftIcon={&lt;ActionInfo /&gt;}
                    containerElement={&lt;Link to="/table" /&gt;}
                    linkButton={true}
                    onTouchTap={this.getTable.bind(this, el.id)} 
                /&gt;
            );
        });
        return tableList;
    }

    render() {
        return (
            &lt;div&gt;
                &lt;div style={styles.headerStyle}&gt;
                    &lt;h1&gt;Here are the current tables available&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div style={styles.root}&gt;
                    &lt;div style={styles.container}&gt;
                        &lt;List&gt;
                            {this.addTables()}
                        &lt;/List&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    }
}

export default MainTablePage;
</code></pre>

<p>Oh yeah, I'm using material-ui so that probably doesn't help matters!</p>

<p>Any help would be much appreciated</p>

<p>Thanks for your time</p>