Хотите более стандартный способ навигации по страницам с помощью Reactjs?

Использование jQuery, как и это (за ним следует решение, которое не использует jQuery, за исключением события, намного меньше вызовов функций, если это важно):

$(".rightArrow").click(function() {
  var rightArrowParents = [];
  $(this).parents().addBack().not('html').each(function() {
    var entry = this.tagName.toLowerCase();
    if (this.className) {
      entry += "." + this.className.replace(/ /g, '.');
    }
    rightArrowParents.push(entry);
  });
  alert(rightArrowParents.join(" "));
  return false;
});

Пример в реальном времени:

$(".rightArrow").click(function() {
  var rightArrowParents = [];
  $(this).parents().addBack().not('html').each(function() {
    var entry = this.tagName.toLowerCase();
    if (this.className) {
      entry += "." + this.className.replace(/ /g, '.');
    }
    rightArrowParents.push(entry);
  });
  alert(rightArrowParents.join(" "));
  return false;
});

  Click here

(В живых примерах я обновил атрибут class на div как lol multi до продемонстрировать обработку нескольких классов.)

Использует parents , чтобы получить предков элемента, который был нажат, удаляет элемент html из этого через not (с тех пор, как вы начали с body), затем перебирает записи для каждого родителя и нажимает их на массив. Затем мы используем addBack , чтобы добавить a обратно в набор, что также изменяет порядок набора на то, что вы хотели (parents является особенным, он дает вам родителей в обратном порядку, который вы хотели, но затем addBAck возвращает его в порядке DOM). Затем он использует Array#join для создания строки с разделителями.

При создании записи, если в className есть что-либо, мы заменяем пробелы на . для поддержки элементов, которые имеют более одного класса (

имеет className = "foo bar", поэтому запись заканчивается на p.foo.bar).

Просто для полноты, это одно из тех мест, где jQuery может быть излишним, вы можете легко сделать это просто подойдя к DOM:

$(".rightArrow").click(function() {
  var rightArrowParents = [],
    elm,
    entry;

  for (elm = this; elm; elm = elm.parentNode) {
    entry = elm.tagName.toLowerCase();
    if (entry === "html") {
      break;
    }
    if (elm.className) {
      entry += "." + elm.className.replace(/ /g, '.');
    }
    rightArrowParents.push(entry);
  }
  rightArrowParents.reverse();
  alert(rightArrowParents.join(" "));
  return false;
});

Пример в реальном времени:

$(".rightArrow").click(function() {
  var rightArrowParents = [],
    elm,
    entry;

  for (elm = this; elm; elm = elm.parentNode) {
    entry = elm.tagName.toLowerCase();
    if (entry === "html") {
      break;
    }
    if (elm.className) {
      entry += "." + elm.className.replace(/ /g, '.');
    }
    rightArrowParents.push(entry);
  }
  rightArrowParents.reverse();
  alert(rightArrowParents.join(" "));
  return false;
});

  Click here

Там мы просто используйте стандартное свойство parentNode элемента элемента повторно, чтобы подойти к дереву, пока мы не закончим родительский или не увидим элемент html. Затем мы отменим наш массив (поскольку он отстает от того, что вы хотели), и присоединяйтесь к нему, и мы будем рады.