user6810289 user6810289 - 1 year ago 133
React JSX Question

Detecting ReactJS Page Changes

I'm new to ReactJS so have been experimenting on some sites that use it. Right now, I'm trying to make an AJAX call to an API based on a pages URL. The problem is that whenever a link is clicked, my code breaks because it's not detecting a page change. My current approach is to listen for click events on all links and piggyback off two selectors I see appear when the page is loading (pageLoading--loading and pageLoading--finished). Is there a better way to detect page changes for single page applications? For situation reference since these are experiments, I have no access to the server. Below is my current code approach.

//When any link on the page is clicked
document.body.onclick = function(e){
e = e || event;
var from = findParent('a', || e.srcElement);
if (from){
//check if pageLoading--finished ran then make an AJAX request
//find first parent with tagName [tagname]
function findParent(tagname,el){
if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
return el;
while (el = el.parentNode){
if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
return el;
return null;

Answer Source

Try using setState. That way react will notice page changes and handle events. Here's a quick example of adding new notes to a notes array.

addNote = () => {
            notes: this.state.notes.concat([{
                id: uuid.v4(),
                task: 'new task'

For some more info check out

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download