Express. js маршрутизация: как предотвратить перезагрузку предыдущей страницы?

Question

Я новичок в express (или веб-разработке в целом) и у меня есть вопрос о маршрутизации. Я создаю веб-приложение на Firebase с чистым JS и использую маршрутизацию на облачных функциях Firebase. Часть маршрутизации выглядит как ниже. Цель состоит в том, чтобы, когда URL-адрес имел вид / xxxxxx, он отправлял страницу профиля html, а когда URL-адрес имел значение r / xxxxx, он отправлял страницу сообщений html. Затем будет выполнен рендеринг на стороне клиента, чтобы заполнить дополнительные данные для создания страницы. Ниже приведена часть кода:

exports.webAPI = functions.https.onRequest(app);
    app.get('/:id', (req, res) => {
        res.set('Cache-Control', 'public, max-age=86400, s-maxage=86400');
        res.status(200).sendFile(path.join(__dirname+'/app/profile.html'));
    });
    app.get('/r/:post', (req, res) => {
        res.set('Cache-Control', 'public, max-age=86400, s-maxage=86400');
        res.status(200).sendFile(path.join(__dirname+'/app/post.html'));
    });

Проблема заключается в следующем: всякий раз, когда пользователь нажимает на сообщение и затем возвращается на страницу профиля, вся страница отображается заново. Понятно, что это очень плохо для пользовательского опыта в мире современных веб-приложений.

Вопрос: как предотвратить перезагрузку предыдущей страницы, если в ней нет существенных изменений (например, добавлено новое сообщение?)? Есть ли способ сделать это в Express? Если есть лучшая версия кода для этого, дайте мне знать. Если мне нужно просмотреть некоторые части документации, пожалуйста, сообщите. Или, если это невозможно с Express, и я должен взглянуть на что-то еще, укажите мне, где искать. Спасибо!

Answer 1

Установить топор ios пакет. В моем сценарии я пытаюсь зарегистрировать форму. Так что это все, что мне нужно сделать для регистрации без обновления страницы.

const register = async (name, email, password, passwordConfirm) => {
    try {
        const res = await axios({
            method: "POST",
            url: "your url",
            data: {
                name,
                email,
                password,
                passwordConfirm
            }
        });
        console.log(res);
        if (res.data.status === "success") {
            alert("You are registered succesfully");
            window.setTimeout(() => {
                location.assign("/");
            }, 1500);
        }
    } catch (error) {
        alert(error.response.data.message);
        console.log(error);
    }
};

document.querySelector("#registerform").addEventListener("submit", e => {
    e.preventDefault();
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const passwordConfirm = document.getElementById("confirmPassword")
    .value;
    register(name, email, password, passwordConfirm);
});

Примечание: e.preventdefault играет главную роль.