I'm trying to make a simple router with url parameters for id's. eg localhost/profile/123
This works fine but if I remove preventDefault
so that the links works as normal, or refresh the browser, or go directly to that same url, it does not work and the browser looks for the javascript file main.js
in localhost/profile
instead of the origin localhost
. Routes without parameters works fine. What is happening here?
const router = async path => {
if(!path) path = location.pathname
const segment = route.split('/')
path = '/' + segment[1]
const parameter = segment[2]
const routes = {
'/' : { handler: home },
'/about' : { handler: about },
'/profile' : { handler: profile },
}
render(html`
<main>${await routes[path].handler(parameter ? parameter : '')}</main>
`, document.body)
}
const main = async () => {
await router()
document.body.addEventListener('click', e => {
e.preventDefault()
if(e.target && e.target.nodeName == "A") {
let path = e.target.pathname
history.pushState({urlPath: path}, '', location.origin + path)
onpopstate = () => router()
router(path)
}
})
}
main()
from Simple router with url parameter variables
No comments:
Post a Comment