Компонент ссылки обновляет историю браузера, когда местоположение совпадает

Question

Компонент ссылки обновляет историю браузера, когда местоположение совпадает

Вы не нуждаетесь в jQuery для этого ...

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

Прост в использовании ...

sortUnorderedList("ID_OF_LIST");

Live Demo & rarr;

2

reactjs react-router javascript

задан Vadim Hulevich 18 January 2019 в 11:21

1 ответ

Другие вопросы по тегам:

reactjs react-router javascript

Похожие вопросы:

score 0 · Answer 1

Это старая и известная проблема, появившаяся в React Router v4, и в настоящее время она (AFAIK) не решена.

К счастью, обойти это довольно легко, используя пользовательский объект истории (то, что вы бы сделали, если вы хотите синхронизировать состояние Redux с историей браузера). Настоящий производственный код должен быть более надежным, чем то, что я пишу здесь, но вы можете начать с этого:

a) Прежде всего используйте <Router> вместо <BrowserRouter>.

import { Router, Route, Link } from "react-router-dom";

b) Создает свой собственный объект истории (не забудьте npm add history, если вы этого не сделали):

import createBrowserHistoryfrom "history/createBrowserHistory";

// ...

const history = createBrowserHistory();

c) Замените метод push() вашей собственной реализацией: [ 1114]

const originalHistoryPush = history.push;

history.push = function(path, state = {}) {
    if (!this.location) {
        originalHistoryPush(path, state);
        return;
    }

    const oldPath = this.location.pathname + this.location.search + this.location.hash;
    if (oldPath !== path || !shallowEqual(state, this.location.state)) {
        originalHistoryPush(path, state);
    } else {
        this.replace(path, state);
    }
};

d) Используйте пользовательскую историю :

<Router history={history}>...</Router>

Обратите внимание, что для сравнения я использую гипотетический метод shallowEqual(). Вы можете быстро написать свою собственную или выбрать одну из множества реализаций.