Local development of React-router-dom and local services (node, webpack)

Scene

Use react to do development and avoid using React-router

React Router is already a V4 version.

React RouterNow it has been divided into three packages: react-router , react-router-dom , react-router-native .
The React Router application provides the core routing components and functions, while the other two packages provide the components of the specific environment (the browser and the react-native corresponding platform), but they also export the React-router exported modules again.

# # # The core of this article is about react-router-dom and local service stories.

react-router-domAs the platform of the browser, is our web preferred to do. react-router-domcan select <BrowserRouter> and <HashRouter> component

<BrowserRouter>Should be used in projects where the server processes dynamic requests (know how to handle arbitrary URIs)
<HashRouter>Used to process static pages (only requests that request known files).

If there is a Link tag, click to jump to/test/guide.

Browserrouter:http://localhost:8080/test/guide
Hashrouter:http://localhost:8080/#/test/guide

Generally, it is more recommended to use

About local services

Today, front-end development avoids local service development, and most will choose node as the Local service development layer, including koa,express. Webpack do Local Service Webpack-dev-server (also an express service)
Local routing is not avoided with local services. How do get URL requests for local services fit with React-router? Please look down.

About Hashrouter and local services

Hashrouter do local development, mainly hash address, hash address refers to the URL after the # number. This feature will only implement static page jumps, will not produce the change of the route
As the above example Hashrouter:http://localhost:8080/#/test/guide, for the server, the route is actually the root directory '/', and "#/test/guide" is just the hash address, Can be viewed through the browser location command
Because for the service side, the route does not actually have a GET request change, so that the server does not respond, there will be no cannot get page hint 404 and other issues.

If it is a webpack service, there are a lot of articles about setting up the historyApiFallback：true Internet, giving this answer to deal with local service problems

The first # # # # Devserver.historyapifallback is used to redirect to a specific page when returning 404 pages

If you modify the Output.publicpath value by default to '/' in the Webpack configuration file, then you need to declare the request redirect and configure the Historyapifallback.index value.

// output.publicPath: ‘/assets/‘historyApiFallback: { index: ‘/assets/‘}

About Browserrouter and local services
By the above example Browserrouter:http://localhost:8080/test/guide, visible, using Browserrouter, the history URL link is processed, when the link jumps, If the page is refreshed reload operation, the local service
Will capture a GET request for a route, which is the key to the problem, requires local service to handle the request, there are many ways, here is a more general direct way;

  const ROUTER = Express.     Router (); Const REQUEST = require ("Request-promise"). Defaults ({jar:true}); Router.all ("*", Async (req, res, next) = { Let URL = req.url;    URL on page link let html = ""; Does not match the following routing rule, only matches the URL get request if (Url.match (/\.    Png|jpe?g|gif|js|css|html|ico)) {return next ();    } HTML = await Reactroute (). catch (E = = {//do error handle return false;    });    if (HTML) {return res.send (HTML); }//Other route processing rules ... return next ();}) Async function Reactroute () {return new Promise ((Resolve, reject) +//Can be filtered for a non-react project here, not important here/if (noreact {//Reject (' No React URL ')//} Let HTML = Await request ({method: "Get", url: ' http://localhost:808    0/pages/index.html '//Local Service index path (browserrouter path configured for react), varies by project, only one example}). catch (E = = {reject (e);    });  Resolve (HTML); })}

The logic of the above code is that the local service, read the URL get request, if the Local service request 404, then put the React browserrouter boot file back, the file should be the local service can read to the HTML file.
The following is a schematic

Local development of React-router-dom and local services (node, webpack)