I'm in the process of developing my own personal website/blog with Mithril.js as a single page application. Each page and blog post on the site is generated using components called Page and Post, respectively. The correct page is displayed based on the specified :slug in the URL.
However, I've encountered an issue where the content does not update when switching between pages. Navigating between different types of content (pages and posts) works fine because I switch between Page and Post components. Yet, when attempting to use the same component consecutively, like moving from one page to another, the webpage fails to refresh.
m.route(document.body, '/', {
// `Home` acts as a proxy for `Page`
// allowing routing to `/` instead of just `/home`
'/': Home,
'/:slug': Page,
'/blog/:slug': Post
});
const Home = {
view() {
return m(Page, { slug: 'home' });
}
};
This snippet displays the Page component (with the Post being similar). Both components are rendering correctly.
const Page = {
content: {},
oninit(vnode) {
m.request({
method: 'GET',
url: 'content.json',
}).then((response) => {
Page.content = response.pages[vnode.attrs.slug];
});
},
view() {
if (Page.content) {
return [
m('#content', m.trust(Page.content.body))
];
}
}
};
The issue at hand is why Mithril is failing to acknowledge the change in slug. What might be causing this problem?