React-Router's Link-To updates the URL but doesn't refresh page

Question

The header of my site has 10 category images (links). Each uses React-Router's Link to route to each category's respective categoryShow.

The link works from categoryIndex, but it no longer works when being clicked form a cagetoryShow. It properly updates the browser when clicking on it, for example it does pushState to /cateories/18 and /categories/2, but the browser doesn't refresh.

Worth noting is the link works from every other Index-type and Show-type page. It just doesn't work from categoryShow in particular. I wonder if successive clicks to the same name, eg Link to="categoryShow", somehow keeps the router from doing a page refresh?. Edit: I tried changing that to Link to= {"/categories/" + this.props.id } and it does the same thing.

Here's the noteworthy component structure. All the data is successfully being passed all the way through updating the URL. It's just that the page does't refresh in one particular case:

-categoryShow
 -header (fetches and passes category data to child)
  -headerMenu (receives category data, passes on to child)
   -headerMenuCard (receives category data, uses the id in the link seen below)

headerMenuCard:

var HeaderMenuCard = React.createClass({

...
    return(
        <div >
            <Link to="categoryShow" params={{id: this.props.id}} ></Link>
        </div>
    )
})

Here's CategoryShow, which is where the link routes to:

var CategoryShow = React.createClass({

getInitialState: function(){
    return{
        didFetchData: false,
        items: [],
        userID: localStorage.getItem('userID'),
        headerImage: "../categories.png"
    }
},

componentDidMount: function(){
    this.fetchData()
},

fetchData: function(){
    var data = {
       userID: this.state.userID
    }
    var params = this.props.params.id

    $.ajax({
        type: "GET",
        url: "/categories/" + params,
        data: data,
        dataType: 'json',
        success: function(data){
            this.setState({didFetchData: 'true', items: data.items})
        }.bind(this),
        error: function(data){
            alert("error! couldn't fetch category data")
        }
    })
},

render: function(){
    var itemArray = this.state.items.map(function(item){
        return <ItemCard name={item.name} key={item.id} id={item.id} photo_url={item.photo_url} description={item.description} userID={localStorage.getItem('userID')} like_status={item.like_status}  />
    })
    return(
        <div>
            <Header />

            <section className="body-wrapper">
                {itemArray}     
            </section>      
        </div>
    )
}
})

Answer 1

You'll receive new parameters in props and thus you only need to run fetchData or any other logic in componentWillReceiveProps or componentWillUpdate.