Preface: On the network, many articles introduce the front-end routing implementation, as well as the routing principle of the article. However, during the recent interview process, I found that all the interviewees could clearly explain the technical implementation of routing, but did not understand the applicable scenarios of each technical implementation. For example, the hash route, many people will answer that the hash route with a # is not good, so the history route is used. Even when I went out to interview, some of the interviewers thought so. Any technical solution is created to solve some specific problem. Hash and history are no exception.

Currently, front-end routing schemes mainly include the following

  • hash: is probably the pattern most people know, mainly based on the principle of anchor point implementation. Simple and easy to use
  • browser: that is, the use ofhtml5In the standardhistory apiBy listeningpopstateEvents todomPerform operations. Each route change causes a redirect
  • memoryThis implementation is a complicated way to maintain a stack in memory for managing access history. In the early use of mobile terminal more. Implementation trouble, the problem is also more. It is rarely used now.RNThis routing mode is in use
  • static: Mainly used forssr. Routes need to be managed by the backend

Front-end routing solves the problem

  • Different pages are displayed based on route changes
  • throughqueryThe ginseng

Comparison of front-end routing implementations

Advantages and Disadvantages of Hash Routing

  • advantages

    • Simple implementation, good compatibility (compatible toie8)
    • Most front-end frameworks are provided to givehashRouting implementation of
    • No setup or development is required on the server side
    • In addition to resource loading andajaxNo requests are made other than those requested

  • disadvantages

    • Some operations that need to be redirected cannot be obtained from the back endhashPart of the content, resulting in the background cannot be obtainedurlA typical example is the wechat official accountoauthvalidation
    • The server cannot accurately track the front-end routing information
    • The need for anchor functionality would conflict with current routing mechanisms

Advantages and Disadvantages of Browser Routing

  • advantages

    • For the redirection process will not be losturlParameter in. The back end can get this data
    • Most of the preceding frames are providedbrowserRouting implementation of
    • The backend can accurately track routing information
    • You can usehistory.stateTo get the currenturlCorresponding status information

  • disadvantages

    • Less compatible thanhashRouting (only compatible toIE10)
    • Need back end support, return each timehtmlThe document

Advantages and disadvantages of Memory routing

  • advantages

    • There are no compatibility issues, and the route is stored in memory
    • No server-side support is required

  • disadvantages

    • Few front-end routing modules currently provide pairsmemoryRouting implementation (react-routerprovidesmemoryImplementation)
    • It is difficult to achieve by oneself, and the workload is also very large
    • Route management for forward and backward operations is very troublesome, especiallyandroidThe equipmentbackbutton

staticAdvantages and disadvantages of the route (This route mode is mainly used forssr. No comparisons.)

How to select a proper front-end routing scheme? The following suggestions are for reference:

Hash mode Applies to the following scenarios:

  • Compatible with Internet explorer
  • No redirection parameter requirement (third-party authenticationoauth)
  • There is no anchor jump requirement
  • The back-end does not need to track the front-end routing information
  • hybrid appFront-end resources need to be packaged within the application becausehtmlThe domain of thefile://So no redirection can take place

The history mode is applicable to:

  • In-page anchor point requirements
  • You need to redirect the pass parameter
  • Homogeneous straight out
  • The backend traces routing information
  • Additional routing information (history.state) To obtain the route status

Memory mode applies to the following scenarios:

  • Compatible with Ie8
  • React Native