This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

background

Learning the front end of three months, ready to brush interview questions, summary summary, a few interview questions a day, to the big factory.

If you’re developing apps with React, you’ll probably use the React-Router. When do we use HashRouter and when do we use BrowerRouter?

The sample

React Router Router Router Router Router Router Router Router

    import { HashRouter } from "react-router-dom";
    
    render(){
              <Provider store={store}>
                    <HashRouter>
                        <App />
                    </HashRouter>
                </Provider>
    }
Copy the code

The HashRouter is used here

We’re looking at using BrowserRouter

  import { BrowserRouter } from "react-router-dom";
  
    render(){
              <Provider store={store}>
                    <BrowserRouter>
                        <App />
                    </BrowserRouter>
                </Provider>
    }
Copy the code

It used to be that somebody would build the framework for us, and I would just use it, and I wouldn’t care about routing, but when you build the framework yourself, you think about it, right? Why use this route?

Implementation of front-end routing

Routing needs to implement the following functions:

  1. Switch pages when the browser address changes.
  2. Click the browser back, forward button, webpage content changes;
  3. Refresh the browser, and the page load content corresponds to the IP address of the current route.

In a single-page Web page, a simple browser address change will not overload the page, such as a simple hash value change, the page will not change, so our routing needs to monitor events, and use JS to dynamically change the page.

  • Hash mode: Monitors the hash value change of the browser address and performs the corresponding JS switch.
  • History mode: use H5 history API to change the URL address and change the web content.

Hash pattern

Use the window.location.hash attribute and the window.onHashchange event. Can listen for browser hash values to change, to perform the corresponding JS switch page.

Implementation principles of Hash routing:

  1. Hash refers to the # and the characters that follow in the address. It’s called a hash value.
  2. The hash value is not sent to the server with the request, so changing the hash does not reload the interface.
  3. Listen for the onHashchange event. When the hash changes, you can use window.location.hash to get and set the hash value.
  4. Changes to the location.hash value are directly reflected in the browser’s address bar.

The history mode

To use history, we should first look at the window.history object. It represents the browsing history of the current window. When changes are made, only the path will be changed, not the interface will be refreshed.

The History object is just a stack.

Methods:

History.back: Move to a url, equivalent to moving the browser back.

History.forward: Move to the next url, equivalent to browser forward.

History.go: Takes an argument to jump to the current page. Default history.go(0) to refresh the current interface. History.go (1) is equivalent to history.forward();

History.pushstate (): Adds a record to the History stack. Does not refresh the screen, but only causes the History object to change and the address bar to change.

History.replacestate (): replaces the top record in the current History stack. It doesn’t refresh the page, it just changes the Histoty object and changes the address bar.

The popState event is raised whenever the history object changes: window.addeventListener (” popState “,function(){})

Calls to pushState or replaceState will not trigger the change event. Calls to back,forward, or go will trigger the change event.

Now we can also see how BrowserHisory uses the History API to change the URL, change the content of the page.

Difference? How do we choose

The underlying principle is different:

BrowserRouter calls the H5 History API.

HashRouter uses URL hashes

The address bar has different forms:

Path of BrowserRouter: localhost:3000/demo/a

Localhost :3000/#/demo/a

Impact on route State parameters after refreshing

BrowserRouter has no effect because state is stored in the History object.

[Bug Mc-103866] – HashRouter refresh causes loss of route state parameter.

BrowserRouter is officially preferred because it is built on H5’s History API and has many more ways to manipulate urls than hashRouter.

I suggest using HashRouter for front-end routes and BrowerRouter for service routes

conclusion

One step at a time, solid work!