react-router in the history

react-router in the history

eact-router  is built on the history of

a history management application session session js js library history. It different environments (browsers, node ...) unified variables into a simple API to manage history stack, navigation, confirmation jump, and continued state between sessions.

  
  
// Basic use
import { createHistory } from 'history'

const history = createHistory()

// current address
const location = history.getCurrentLocation()

// Listen for the current address translation
const unlisten = history.listen( location => {
console.log(location.pathname)
})

// The new entrance into the history stack
history.push({
pathname: '/the/path',
search: '?a=query',

Some // url parameter does not exist above the value of the current state of the url
state: { the: 'state' }
})

// When you're finished, stop the listener
unlisten()
  
  

You can also object to the use of history to change the current location:

• push(location)
• replace(location)
• go(n)
• goBack()
• goForward()

A history knows how to monitor changes in the browser address bar, and parse the URL into the location object, and then match it to the router using the routing, the last correctly render the corresponding components.

location objects include:

   
   
pathname 同window.location.pathname
search the same window.location.search
state a bundle object object on this address
action PUSH, REPLACE, one or POP
key unique ID
   
   

Three common history

    
    
// HTML5 history, recommended
import createHistory from 'history/lib/createBrowserHistory'

// Hash history
import createHistory from 'history/lib/createHashHistory'

// memory history (eg: node environment)
import createHistory from 'history/lib/createMemoryHistory'
    
    




createHashHistory

This is one you will get the default history, if you do not specify a history (ie <Router> {/ * your routes * /} </ Router>). It is used in the URL hash (#) to create shaped like http://example.com/#/some/path part of the route.

Hash history is the default because it can not make any configuration can be run on the server, and it includes IE8 + can be used in all popular browsers. But we do not recommend to use it in actual production, because every web application should have a destination to use createBrowserHistory.

createBrowserHistory

Browser history is to create a browser application recommended by the history React Router. It uses  History API was created to handle URL in the browser, such as a new real `URL example.com / some / path`

createMemoryHistory

Memory history will not be operated or read in the address bar. This explains how we achieve server rendering. At the same time it is also very suitable for testing and other rendering environment (like React Native).

For details, please see Address: https://zhuanlan.zhihu.com/p/20799258?refer=jscss