In this post I’ll implement an extreme basic SPA routing using plain JavaScript.
The goal is to give an idea of how it’s possible to render different dynamic contents based on the URL with plan JavaScript.<\/p>\n\n\n\n
We want to have a basic website that shows different topic based on 3 urls:<\/p>\n\n\n\n
For other urls we show an error message.
We can use HTML and plain JavaScript.<\/p>\n\n\n\n
Let’s create the HTML page and an empty JS file In order to serve it, we can install and then run it on our HTML file:<\/p>\n\n\n\n Now it should be possibile to visit Let’s create the components now.<\/p>\n\n\n\n We use the «template literal» expression, which is a string literal that can span multiple lines and interpolate expressions.<\/p>\n\n\n\n Each component has a Now we have the components that we want to show in the page.<\/p>\n\n\n\n We need to create the routes and connect them somehow with the components.<\/p>\n\n\n\n So, let’s do it in a easy way:<\/p>\n\n\n\n How should the router look like? Then let’s start! \ud83d\ude42 <\/p>\n\n\n\n The The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively. (MDN Web Docs<\/a>)<\/p><\/blockquote>\n\n\n\n One property of the location object is In other words, given this URL: So we need to extract from that string something we can use with out We remove the «#» char from and in case any hash value is provided, we assume it will be the base url: At this point we solved the first «TODO» of the list:<\/p>\n\n\n\n Since we have the In case we can’t find any route, that we just return We solve the next TODO now! Now we are ready to solve the third and last TODO: render the component in the app.<\/p>\n\n\n\n If you remember, our components have a This is very easy, you know. The Even if the code would work, there’s something sill missing. We need to call it in 2 cases: We need to add to event listeners and bind them with our That’s it \ud83d\ude42<\/p>\n\n\n\n Here you can find a live example:<\/p>\n\n\n\n \u2022 Learn how Window.location works \u2022 Window.location<\/a>index.html<\/code><\/p>\n\n\n\n<html>\n <head>\n <title>JavaScript Router Example<\/title>\n <\/head>\n <body>\n <header>\n <h1>JavaScript Router Example<\/h1>\n <\/header>\n <section id="app"><\/section>\n <nav>\n <a href="\/">Home<\/a> -\n <a href="#\/page1">Page 1<\/a> -\n <a href="#\/page2">Page 2<\/a>\n <\/nav>\n <script type="text\/javascript" src=".\/app.js" \/>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
app.js<\/code>.<\/p>\n\n\n\nlive-server<\/code> globally:<\/p>\n\n\n\nnpm install -g live-server<\/pre><\/div>\n\n\n\n
live-server --port=3000 --entry-file=\u2019.\/index.html\u2019<\/pre><\/div>\n\n\n\n
http:\/\/localhost:3000\/<\/code> and see the page.<\/p>\n\n\n\nCreate the components<\/h3>\n\n\n\n
render<\/code> method that returns the HTML template.<\/p>\n\n\n\n\/\/ Components\nconst HomeComponent = {\n render: () => {\n return `\n <section>\n <h1>Home<\/h1>\n <p>This is just a test<\/p>\n <\/section>\n `;\n }\n} \n\nconst Page1Component = {\n render: () => {\n return `\n <section>\n <h1>Page 1<\/h1>\n <p>This is just a test<\/p>\n <\/section>\n `;\n }\n} \n\nconst Page2Component = {\n render: () => {\n return `\n <section>\n <h1>Page 2<\/h1>\n <p>This is just a test<\/p>\n <\/section>\n `;\n }\n} \n\nconst ErrorComponent = {\n render: () => {\n return `\n <section>\n <h1>Error<\/h1>\n <p>This is just a test<\/p>\n <\/section>\n `;\n }\n}<\/pre><\/div>\n\n\n\nCreate the routes<\/h2>\n\n\n\n
\/\/ Routes \nconst routes = [\n { path: '\/', component: HomeComponent, },\n { path: '\/page1', component: Page1Component, },\n { path: '\/page2', component: Page2Component, },\n];<\/pre><\/div>\n\n\n\nRouter<\/h2>\n\n\n\n
Let’s assume that our goal is to code something like that:<\/p>\n\n\n\nconst router = () => {\n \/\/ TODO: Get the current path\n \/\/ TODO: Find the component based on the current path\n \/\/ TODO: If there's no matching route, get the "Error" component\n \/\/ TODO: Render the component in the "app" placeholder\n};<\/pre><\/div>\n\n\n\nGet the current path<\/h3>\n\n\n\n
location<\/code> object is excatly the tool we need.<\/p>\n\n\n\nlocation.hash<\/code>, which contains the part of the URL from ‘#’ followed by the fragment identifier of the URL.<\/p>\n\n\n\nhttp:\/\/foo.bar\/#\/hello<\/code>, location.hash would be: ‘#\/hello’.<\/p>\n\n\n\nroutes<\/code>.<\/p>\n\n\n\n\/<\/code>.<\/p>\n\n\n\nconst parseLocation = () => location.hash.slice(1).toLowerCase() || '\/';<\/pre><\/div>\n\n\n\n
const router = () => {\n \/\/ Find the component based on the current path\n const path = parseLocation();\n \/\/ TODO: If there's no matching route, get the "Error" component\n \/\/ TODO: Render the component in the "app" placeholder\n};<\/pre><\/div>\n\n\n\nGet the the right component<\/h3>\n\n\n\n
path<\/code>, what we need to do is to get the first matching entry of the routes<\/code>.<\/p>\n\n\n\nundefined<\/code>.<\/p>\n\n\n\nconst findComponentByPath = (path, routes) => routes.find(r => r.path.match(new RegExp(`^\\\\${path}$`, 'gm'))) || undefined;<\/pre><\/div>\n\n\n\n
We use a «destructuring assignment» to assign the matching component to the const component<\/code>, which gets by default the ErrorComponent<\/code>.
Since the «destructuring assignment» requires an object on the right-hand side and since our findComponentByPath<\/code> function could return undefined<\/code>, we provide in this case just an empty object {}<\/code>.<\/p>\n\n\n\nconst router = () => {\n \/\/ Find the component based on the current path\n const path = parseLocation();\n \/\/ If there's no matching route, get the "Error" component\n const { component = ErrorComponent } = findComponentByPath(path, routes) || {};\n \/\/ TODO: Render the component in the "app" placeholder\n};<\/pre><\/div>\n\n\n\nRender the component<\/h3>\n\n\n\n
render<\/code> method that returns the HTML template.
So we have to put that template in the app <section id=\"app\"><\/section><\/code>.<\/p>\n\n\n\n
We get the element using the id and put the content in the innerHTML<\/code> property.<\/p>\n\n\n\ndocument.getElementById('app').innerHTML = component.render();<\/pre><\/div>\n\n\n\nrouter<\/code> is ready:<\/p>\n\n\n\nconst router = () => {\n \/\/ Find the component based on the current path\n const path = parseLocation();\n \/\/ If there's no matching route, get the "Error" component\n const { component = ErrorComponent } = findComponentByPath(path, routes) || {};\n \/\/ Render the component in the "app" placeholder\n document.getElementById('app').innerHTML = component.render();\n};<\/pre><\/div>\n\n\n\nMake it work<\/h3>\n\n\n\n
We are never calling the router<\/code>! Our code right hasn’t been executed yet.<\/p>\n\n\n\n
1) On page load since we want to show the right content from the very first moment
2) On every location update (actually every «hash» location update)<\/p>\n\n\n\nrouter<\/code>.<\/p>\n\n\n\nwindow.addEventListener('hashchange', router);\nwindow.addEventListener('load', router);<\/pre><\/div>\n\n\n\nKey takeaway points:<\/h1>\n\n\n\n
\u2022 Learn how template literals work
\u2022 Learn how EventTarget.addEventListener() works<\/p>\n\n\n\nDocs:<\/h1>\n\n\n\n
\u2022 Template literals (Template strings)<\/a>
\u2022 EventTarget.addEventListener()<\/a><\/p>\n\n\n\nAbout this post<\/h2>\n\n\n\n