My site title contains 10 category images (links). Each uses a React-Router Link to go to each category corresponding to the category.
The link works from the Index category, but it no longer works when you click the cagetoryShow button. It updates the browser correctly when you click on it, for example, pushState to / cateories / 18 and / categories / 2, but the browser does not update.
It is worth noting that the link works from all other pages like Index and Show-type. It just doesn't work with categoryShow in particular. I wonder if consecutive clicks with the same name, for example Link to = "categoryShow", somehow forces the router to refresh the page ?. Edit: I tried changing this to a link to = {"/ categories /" + this.props.id}, and it does the same.
The component structure deserves attention here. All data is successfully transferred completely by updating the URL. It is just that the page does not 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 the CategoryShow where the link is located:
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> ) } })