WedX - журнал о программировании и компьютерных науках

Как обновить страницу с помощью ссылки response-route

Я пытаюсь обновить страницу с помощью ссылки response-route. Но способ, которым я реализовал, идет к URL-адресу на один шаг назад. (Например, если URL-адрес был ../client/home/register, и когда я нажимаю перезагрузку, он переходит к ../client/home)

ниже мой код

const AppErrorPage = () => (
    <div>
    <div style={ styles.container }>
        <h2>Error</h2>
        <p> Something went wrong, please reload the page </p>
        <div>
         <Link to="" refresh="true">
            <span>Reload</span>
          </Link>
        </div>
    </div>
    </div>  
);
reactjs javascript react-router
05.01.2017

  • Почему вы хотите перезагрузить страницу? 05.01.2017
  • @JyothiBabuAraja, глядя на пример, похоже, что произошла ошибка, поэтому предлагать пользователю перезагрузить - неплохая идея. 17.04.2018
  • @aug Я так не думаю. Вместо того, чтобы позволять пользователю находиться в состоянии ошибки, можно попросить его начать все заново. Но в идеале мы должны преодолевать такие ситуации без вмешательства пользователя. 18.04.2018

Ответы:


1

Для обновления страницы не нужен response-router, простой js:

window.location.reload();

Чтобы повторно отобразить представление в компоненте React, вы можете просто запустить обновление с помощью props / state.

05.01.2017
  • На самом деле я реорганизовал его, чтобы использовать его как кнопку, но теперь я получаю сообщение об ошибке Ожидается, что прослушиватель onClick является функцией, вместо этого получил строку типа 05.01.2017
  • Вы ввели значение onClick в виде строки, используйте это: onClick={refreshPage} или onClick={() => refreshPage()} 05.01.2017
  • В моем случае не работает. 24.05.2021

    • 2

    Попробуйте вот так.

    Вы должны указать функцию как значение для onClick()

    Вы кнопка:

    <button type="button" onClick={ refreshPage }> <span>Reload</span> </button>

    Функция refreshPage:

    function refreshPage(){ 
    window.location.reload(); 
}
    05.01.2017
  • это неправильно, потому что функция будет вызываться во время рендеринга. Проверить комментарии под моим ответом 05.01.2017
  • @LukasLiesis Спасибо. Просто упустили из виду. Обновил это 05.01.2017
  • Спасибо, у меня это сработало. 24.07.2021

    • 3

    Вы можете использовать это

    <a onClick={() => {window.location.href="/something"}}>Something</a>
    14.10.2020

    4

    В итоге я сохранил Link и добавил перезагрузку в событие Link onClick с таким таймаутом:

    function refreshPage() {
    setTimeout(()=>{
        window.location.reload(false);
    }, 500);
    console.log('page to reload')
}

<Link to={{pathname:"/"}} onClick={refreshPage}>Home</Link>

    без тайм-аута сначала будет запущена функция обновления.

    11.02.2021

    5

    Используйте window.location.reload(), чтобы перезагрузить текущее окно

    <a onClick={() => {window.location.reload()}}>
  Reload the page
</a>

    24.02.2021
    Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]