Novel method for routing Single Page Applications without using hash or regular expressions

I have embarked on creating my own SPA (Single Page Application) stack tool. Currently, I am contemplating the router mechanism for it - deliberating between using a hash (#) based router or exploring alternative options:

  1. One option is to utilize the window.history API - similar to how Twitter has implemented pushState for their website (). It's intriguing why other popular frameworks like React and Angular don't opt for this approach and instead rely on the hash mechanism?

  2. Another possibility is to stick with the hash implementation but streamline the URL mapping by only utilizing one level of nested routes + parameters, such as:

    • #/posts,
    • #/post-new/,
    • #/post/<post-id>,
    • #/post-edit/<post-id>,
    • #/post-comments/<post-id>

By following this structure, there will be no need for complex regex patterns. Each route slug after the first slash will be simple and descriptive, while any parameter will be placed after the second slash (or multiple parameters can be handled with ?param1=X&param2=Y etc.). Are there any downsides to this approach?

EDIT:

To clarify some confusion - I am not interested in adopting existing solutions like Angular, React, Ember, etc. My intention is to develop a personalized tool tailored to my needs, rather than grappling with APIs that may not align with my vision.

javascripturlroutesurl-routingsingle-page-application

Answer №1

Summary

For effective frontend routing, it is crucial to either utilize the history api or the traditional hash implementation.

Detailed Explanation

One approach is to employ AngularJS and eliminate the # from URLs by instructing Angular to use the history api (tutorial):

angular.module('test', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

  }]);

You may also need to add the following in your <head>:

<base href="/">

By setting 

$locationProvider.html5Mode(true);
, Angular will utilize the history api for navigation.

Why do other popular frameworks like React and Angular rely on hash mechanism? This is due to lack of support for the history api in IE9 and earlier versions, as shown here.

An instance of an Angular application without # in URLs, indicating the usage of html5Mode, is found on Google Font

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 4 - The Promising Outcome: How to Retrieve the Value upon Completion

Is there a way to retrieve a value from a promise and store it in a global variable? I've been attempting to accomplish this, but the global variable remains undefined. import { Injectable } from '@angular/core'; import {ActivatedRouteSnap ...

javascriptangular

Is there a chart tool that allows for editing graphs by simply dragging points?

Currently, I am in search of a charting library that is preferably JavaScript-based (although Flash could work as well) and has the capability to display time series data as a line chart. Additionally, I need this library to allow users to drag points on t ...

chartsjavascript

Utilizing dat.gui sliders for rotating bones imported from Blender JSON/COLLADA files within three.js

Looking for guidance on manipulating bones in a json / collada file exported from Blender. Have been attempting this without success. Seeking to incorporate sliders (via dat.gui) for rotating each bone individually. Any pointers or assistance would be gr ...

javascriptthree.jsdat.gui

Utilizing Three.js to create a vertex shader that dynamically adjusts pixel coloring according to its position on the screen

In my project using Three.js, I have created a vertex shader that assigns colors to each point in a plane based on the quadrant of the screen where a pixel is rendered. // customized vertex shader uniform float width; uniform float height; varying float x ...

javascriptthree.jswebglfragment-shadervertex-shader

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

My current setup involves webpack as the bundler/loader, and I've successfully loaded materialize css (js/css). However, when attempting to use the toast feature, an error is thrown: Uncaught TypeError: Vel is not a function The library is being inc ...

javascriptcssnpmwebpackmaterialize

Implementation of the render function in a Node Express class

I've been working on a class with methods to retrieve domains from an API, and everything has been functioning correctly up until I tried to render it using Node Express. When I attempt to display the data, all I get is an array of numbers without the ...

javascriptnode.jsexpresspromiseasync-await

Update the Material UI input field value using an external JavaScript script

Imagine I find myself exploring an online form that utilizes Material UI components, for instance, this example link. I am interested in automatically filling the input fields with a specific value using JavaScript in the console: for (input of document.g ...

javascriptformsmaterial-uitextfieldform-fields

Access the data within a jsonArray using Cypress

I'm dealing with a test.json file that contains a jsonArray [{ "EMAIL": "email_1", "FIRST_NAME": "Daniel" }, [{ "EMAIL": "email_2", "FIRST_NAME": "John" }] ] I'm trying to figure out how to use cypre ...

javascripttypescriptui-automationcypressweb-frontend

Using `b-form-input` to toggle the visibility of the password using `v-bind:type`

Utilizing bootstrap.vue components, specifically "b-form-input", I am trying to implement a feature to hide and show the password by clicking the button attached to the input field. While this functionality works with a regular input field, I am facing cha ...

javascriptvue.jsbootstrap-4bootstrap-vue

How come ng-class doesn't apply to a specific class name?

I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...

javascriptcssangularjsng-classangularjs-ng-class

Incorporating various criteria within a function

Struggling to add 2 conditions in 1 function, need some guidance. Here's the code I have: var timeCheck = function(){ var timePos = videoBGPlayer.currentTime; if (timePos > 1){ TweenLite.to(videoBGPlayer, 3, { marginTop: -130}); ...

javascript

Different ways to modify elements in NUXT.js using Vue.js

I've recently been experimenting with integrating NUXT and Django on my own, and now I am curious about how to add a button to seamlessly transition to the next video using VUE. <video id="movieads" class="center" width=" ...

javascriptvue.jsnuxt.js

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascripthtmlgoogle-chrome

Measuring the Unquantifiable: Embracing Undefined Values in MongoDB

Issue Despite multiple attempts, the Node.js MongoDB library consistently returns undefined for collection.count({}). I have thoroughly researched previous solutions to similar questions without success - the problem persists and the result is always unde ...

javascriptnode.jsmongodb

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

I have made some changes to the Angular2 app on GitHub in order to use Express.js instead of KOA. However, when I try to load the app in FireFox, I encounter the following error in the `nodemon` console: Error: ENOENT: no such file or directory The Angul ...

javascriptangularjsnode.jsexpressangular

Despite working smoothly with an HTML form tag, the "req.file" multer is undefined when it comes to HTTP requests from a script

I have created a basic file uploader using multer in Node.js, which works well when uploading files using an html form like this: <form id="uploadForm" enctype="multipart/form-data" method="post"> <input type="file" name="userFile" /> ...

javascriptangularjsnode.jsexpressmulter

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

javascriptcssmongodbmongoose

Filter array to only include the most recent items with unique names (javascript)

I'm trying to retrieve the most recent result for each unique name using javascript. Is there a straightforward way to accomplish this in javascript? This question was inspired by a similar SQL post found here: Get Latest Rates For Each Distinct Rate ...

javascriptangulartypescript

Is there a way to overlay a div on a particular line within a p element?

Within this paragraph lies a collection of text encapsulated by a < p > tag. When this content is displayed on the page, it spans across 5 lines. My objective is to creatively style and position a < div > tag in order to highlight a specific li ...

javascriptjqueryhtmlcss

The componentDidMount function is not initializing the state

I am trying to access the references from the render function and then set them to the state. Below is my code snippet: class App extends Component { constructor(props) { super(); this.arr = this.generateTimelineArray(); ...

javascriptreactjsstate