Single page application

It's not in React JS A guide to building single page applications with the help of .
This article is about tools that make the modern web look like today and provide a seamless navigation experience , Enable single page applications to exist .

 

A beautiful past

Back to the past , The Internet and everything around it are different , And expectations from the website . A typical web site is a set of Web sites bound to cross references HTML page .

 

Sometimes , Some fancy websites use it on a few pages JavaScript, Mainly used for decorative purposes . Nothing happened there , Mainly callback hell .

The web user experience is not a problem , At least not as big as it is now . Site navigation is very primitive , You click on the link , Then navigate to another page . Real physical pages , That is, it is stored separately on the server . therefore , Before showing you the page , The browser must request it and wait for it to arrive . After a while , The user will see a blink behind the desired page .

The module responsible for providing the correct page for each request is the server router . Its configuration is quite simple . You configure the routing mapping on the server , then …… this is it , You are done .

This is what a typical navigation process looks like .

 

A single page application

From then on , The Internet has gone a long way . In desktop applications and Web In the ongoing struggle between applications , The last application began to dominate after it was able to provide the same look and feel as its predecessor .

Today's modern Web Applications often try to avoid interrupting the user experience and dynamically replacing pages , Avoid the need to go back and forth to the server . This kind of application is called a single page application (SPA). In order to make dynamic page replacement possible ,SPA Must have some kind of router with configurable mapping . The mapping may be the path of the component 、 The path to the view 、 The path you named .

To save the user experience of development and native browser behavior , The client router must use the same source of fact as the server router , namely URL route .

Evolution has brought us a wide variety of powerful frameworks . Most can be used as SPA platform . Although the framework is selected , But it certainly uses one of the two main mechanisms for client-side routing .

Hash route

First , The most popular is the so-called   Hash route . The whole method is based on the use of URL Above the hash symbol in , Especially using JavaScriptwindow.location.hash attribute , This property returns URL Everything after the hash symbol in .

Step back  , The original idea   Is in URL Well number used in , therefore window.location Provides a way to anchor to a location on your current page . Imagine , You have a big HTML file , And you want to provide some sort of directory . Add hash anchor , look , Now you can navigate through the page without reloading it .

The cool thing is , You can use the pound sign to share links , In this way, you can point someone to the exact paragraph you have been looking at . As you might guess at this point , Everything after the pound sign is ignored , And never appeared in HTTP In request . Even if you try to refresh the page , It will also load as usual , Then you will automatically focus on the anchor position . Don't involve javascript, Open the box . magic .

As in javascript What often happens in the world , This function is not used according to its purpose . The main framework began to use it to promote its routing function .

In a further example , I will use React, But you can replace it with any framework you like , And the chart will not change significantly .

Browser routing

stay HTML5 Before release , There is only one way to operate programmatically URL Methods , This is a method we discussed before , That is, through window.location attribute .HTML5 Another method is introduced , namely  History API.API The main goal of is to provide a simple tool to edit the browser history of the current session . It seems that this function is exactly what routing needs ,API There are some functions that can be safely modified without triggering page refresh URL, And a set of hooks for subscribing to historical changes .
It's not exactly right ,API Not modify URL, It will modify the history . Think of session history as a stack . a pile URL, The item above is your current location , The items at the bottom are for the first website you visited URL.History API Provides a way to push items onto the stack , It will change your current location .

If you open the browser console now , Paste history.pushState(null, null, 'potato'); except URL Anything outside the path will change , What's better is , If you click the back button , You will return to the original path of the current article , No page refresh is required .

This brings us another routing method , That is to say History API With the help of . about React, Its name is  Browser Routing.

This route has a hidden quirk . because URL There is no more “#” Symbol , Once the user clicks refresh or share link , Whole URL Will be in HTTP Deliver... In request . The server will not know how to handle the path and return  404 Not Found  HTTP Respond to .

Now is a good time to think about expectations and responsibilities . Because we have a single page application , We don't want the server to do too much in routing . Every time an entry is requested , Just give us a page , Usually index.html, Even though URL route . Once loaded and ready to scroll ,SPA The router must process the path itself at the client .

 

It sounds easier than it . Static web hosting providers rarely allow flexible routing configurations . Besides , In the actual development process , There is usually some kind of fake server involved . therefore , We usually have two different servers , Read two different questions , Fortunately, it can be solved in the same way . The method is backup strategy , Must redefine .

Every time the server router cannot find how to resolve the path , It should go back to the original page （ for example index.html） And back to it . such , It will allow the client router to handle URL route .

Please note that , Now the client router is responsible for 404 Page Not Found. If the selected frame does not handle it , Then you can put 404 page / Components / Anything is configured to have the last item in the routing map that satisfies the path pattern of any given path .

Example

One of the most popular fake development servers is  webpack dev server. It already has a   Built in switch   To manage fallback , Just add one --history-api-fallback That's all right. . By default , It will go back to index.html. however , This property can be used as devServer webpack Part of the configuration uses , And allows you to override the default behavior .

One of the most popular static web hosting is AWS S3. It has an option to To configure What they call error documentation , Just place one of them index.html That's all right. .

 

The examples provided do not cover all possible scenarios , But it should let you know what you are looking for .

to the end

Among other tools and techniques , Client side routing makes single page applications a reality . In turn, , Single page applications bring the same level of user experience as desktop applications .

There are two main ways to implement client-side routing . They all work , But as I mentioned before , Hash Routing Originally built for different purposes . therefore , If you plan to use page anchoring , I suggest you switch to Browser Routing.

But in Browser Routing Under the circumstances , You need to keep in mind that page refresh and sharing will not be out of the box as expected , You have to do some extra configuration to make it work . As Browsing Routing Additional marking for , Your URL The path will look better .

Last , I suggest using... When possible Browser router .