Documents are referenced in ___________. https://reacttraining.com

Make your own website after work and use Reactjs to build it. Recent upgrades to react and webpack versions have made it difficult to start previous projects, which has caused a lot of confusion, so record it in case of trampling again.

Using Reactjs inevitably involves two essential modules

• webpack
• react-router

After the issue of updating webpack 1x to 2x

Let's start with the problem of react-router updating to v4

When we open npmjs.com to search for react-router, we will find that the top three packages are Tim Dorr's.

• React Router Core
• react-router-redux (integration of React Router and Redux)
• React Router-dom (React Router for DOM binding)

So what's the difference between these three bags? Actually, I don't know much about them.

When react-router upgrade to v4 project routing will occur a variety of error problems, children's shoes encountered do not panic. (panic-stricken expression)~

You can find a solution by looking at more documents. In the first line of the document, I will not post it. Reaction-router is currently divided into web version and native version.

web api: 

<BrowserRouter>

A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Note: Use <Router> of HTML5 history API (pushState, replaceState and popstate events) to keep UI and URL synchronized

Browser Router replaces the previous <Router history={browser History}/>.

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

At the same time, it seems that browser History has been deleted in React-Router and needs to be created by itself.

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

<hashRouter>

A <Router> that uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

IMPORTANT NOTE: Hash history does not support location.key or location.state. In previous versions we attempted to shim the behavior but there were edge-cases we couldn't solve. Any code or plugin that needs this behavior won't work. As this technique is only intended to support legacy browsers, we encourage you to configure your server to work with <BrowserHistory> instead.

Note: <Router> uses the hash part of the URL (ie: window.location.hash) to keep the UI and URL synchronized

hash history does not support location.key and location.state, because there are some problems that cannot be solved, any code and plug-ins that need this behavior will not work properly. Since this technology is used to support older browsers, it is recommended that the server be configured as <Browser History>.

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

<link>

Provides declarative, accessible navigation around your application.

Description: Navigation access provided

import { Link } from 'react-router-dom'

<Link to="/about">About</Link>