1.2.6. React – the router

Explain the difference between hashHistory and browserRouter

  • The History property of the Router component listens for changes in the browser address bar and interprets the URL into an address object for the React Router to match.
  • History property, there are three values that can be set.
    • browserHistory
    • hashHistory
    • createMemoryHistory
  • If set tohashHistory, the route will be switched using the hash part (#) of the URL, which has a form similar to example.com/#/some/path
  • If set tobrowserHistoryInstead of Hash, the browser route is displayed as the normal path example.com/some/path, with the browser’s History API behind it.
    • However, this situation requires server modification. Otherwise, if the user requests a child route directly to the server, a 404 error will be displayed indicating that the web page cannot be found.
    • If the development server is using webpack-dev-server, add the –history-api-fallback parameter.
  • createMemoryHistoryMainly used for server rendering. It creates an in-memory History object that does not interact with the browser URL.

Explain the usage of Router and Route apis

  • A Router is a container in react. Real routes are defined by the Route component
import { Router, Route, hashHistory } from 'react-router';

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'));
Copy the code
  • The Route component can also be nested, with the Path attribute of the Route component specifying the matching rule for the Route. This property can be omitted so that the specified component is always loaded regardless of whether the path matches.

How do I render multi-level routing

  • A Route component can be nested within a Route component by rendering a multilevel Route, which loads the external App component and then loads the child component within it, using the this.props. Children property to represent the child component in the external component
<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>
Copy the code

App component:

export default React.createClass({
  render() {
    return <div>
      {this.props.children}
    </div>}})Copy the code
  • Child routes can also be passed to the Routes attribute of the Router component without being written to the Router component
let routes = <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>
Copy the code

Explain the entire process of routing changes to component updates

  • BrowserRouterWill listen for changes in the URL, and when the URL changes, it will cause the browser to display the corresponding page
  • The importBrowserRouter, the use of<BrowserRouter>Contains live<App>, imports all other components for better collaboration and listens for urls to ensure that other components are notified when urls change.
  • When you use BrowserRouter, you’re actually rendering the Router component and passing it the History property. The History library is also built by React Training. The goal isto abstract the differences between different environments and provide minimal APIS to manage the history heap, navigate, and validate navigation. And maintain state between sessions.
  • In summary, for ReactRouter to work, you need to wrap the entire application in the BrowserRouter component, which also wraps the History library so that your application knows about changes in the URL.
  • Leading into theLinkThe component, passed through the Link component to attribute, tells the application which part to route to. The component is rendered as an anchor tag A with the corresponding href, so it behaves like a normal link on the network.
  • RouteAccepting a path will match (or not match) the current URL. If the path matches the URL, the Router will render some UI. If it doesn’t, the Router will not render.

Explain the underlying mechanism of history

  • usingHistory_APIIn MDN, the history stack is mentioned, indicating that its storage situation is a stack structure
1.History. pushState(stateObject, title, URL) for a path jump (that is, adding data to the history stack)2.History.replacestate () is used to modify the data of a record in the stack3.Onpopstate: The popState event is passed to each time the active history entry changeswindowobjectCopy the code