I am using Express and the PUG rendering engine.
In my pug file, I define a link using a(href) like this:
a.link-btn(href='#session-popup') +
(it is an “add” button, supposed to display a popup using a :target CSS property, but this is not useful information for my question I think)
My current URL is http://localhost:3000/movies/form
.
When the HTML is rendered, on my browser, the link is localhost:3000/#session-popup
I do not understand why it happens this way, it should be localhost:3000/movies/form#session-popup
and should not refresh the page.
I do not know if this behaviour comes from Express or PUG. I use express like this:
app.use("/movies", moviesRouter);
router.get("/form", movies_controller.movie_form_get); // in a different file
// and then movie_form_get in a different file renders the PUG file:
exports.movie_form_get = async (req, res, next) => {
res.status(200).render("movie-form", {
versions: movieVersions,
tags: movieTags,
});
};
(sorry for this unconventional code extraction, I tried to put only relevant code)
My link a.link-btn(href='#session-popup') +
is in the “movie-form.pug” file.
I tried a.link-btn(href='./#session-popup') +
without really thinking it would work (it does not).
I tried a.link-btn(href='movies/form/#session-popup') +
==> it works, of course, but I would like not to write the full URL in my PUG file, I would like a relative link.
Why does the PUG engine render my link that way, ignoring the current URL?