Routing Basics

Because we are the front end of the route should be added, the importance of routing, represents as much as you have the courage to jump ship. If you don’t have the courage to jump ship, how can you talk about your future? Routing is page hopping. Is the road to the ideal. So before we can figure out what routing is, we need to figure out what the basics of routing are.

The front-end routing

We know the basics of routing, which are browser URL variations. So we need a Location object. If you already know Vue and React or Angular. We all know that implementing front-end routing is all about listening for URL changes. With the advent of H5, we have two ways to implement routing:

  • hash
  • h5 history API

React-router

  • Trigger and new route, Link/ programmatic navigation
  • The location of the update
  • Update the state
  • Routing matching
  • The new state
  • Update the UI

ReactRouter hook function hook

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

Vue-Router

VueRouter main flow

  • Using VueRouter
  • Register routing table
  • Understanding routing Objects
  • Routing matching
  • Routing transition

Angular-Router

The server renders the route

The server side render route is special, not pure front-end implementation route, nor pure back-end route. It is configured with the ability to render at the front and back ends. Generally used for the home page, the server side rendering. Otherwise use the client side (browser-side rendering capabilities). In fact, we need to understand that the client rendering, the front and back end of the separation in fact to a great extent to relieve the server pressure. Put some of the pressure on the client. But this has a bad place is, SEO and other skills become bad. The server side also took over the original client side rendering capability to make up for this part of the deficiency. But the coordination of front-end and back-end routing becomes the second problem we need to solve.

Server routing

When we use Vue/React frameworks for server-side rendering, routes are no longer routed by the pure front-end.

The back-end routing

The idea of back-end routing is well understood when different requests are received from the client. We can treat it differently depending on the route. The routing on the back end is much purer.

express -router

koa-router

nestjs-router

GraphQL

When we use GraphQL, there is no notion of back-end routing. The query API is used.

reference

  • Discussion on Front-end Routing
  • The 7 Steps of Angular routing navigation
  • The implementation principle of the React – Router