How BrowserRouter cooperates with react-router server

This article mainly introduces the detailed explanation of how the server cooperates with BrowserRouter under react-router 4.0. Now I share it with you and give it as a reference.

react-router plays an important role in react projects as the react framework routing solution.

In the react-router version 4.0, the API has been greatly modified compared with the previous version. The a7f2cf15f06fbef780c6b2609731da81 component commonly used in 2.0 and 3.0 is no longer commonly used as the underlying routing configuration component. Instead, There are four different routing components:

6177ae8eed0322e277a7e6c21878d6d7, 4915f05e1fd45774514682b289f54a27, ab736354b76d127562077b87d19fcb68, 918422798e26d25f6fed3e9f4a3226eb

The ab736354b76d127562077b87d19fcb68 component is in memory Saving "URL" information does not modify the browser's address bar and is often used in non-browser environments such as React Native or test environments.

The 918422798e26d25f6fed3e9f4a3226eb component can be seen from its name that it never modifies the route, which is very useful when rendering on the server side.

4915f05e1fd45774514682b289f54a27 component We are most familiar with the routing component without going into details. Here I will talk about the pitfalls I encountered when using the 6177ae8eed0322e277a7e6c21878d6d7 recommended by react-router.

6177ae8eed0322e277a7e6c21878d6d7

6177ae8eed0322e277a7e6c21878d6d7 and 4915f05e1fd45774514682b289f54a27 can both implement the front-end routing function. The difference is that the former is based on the rul pathname segment and the latter is based on the hash segment.

The former: http://127.0.0.1:3000/article/num1

The latter: http://127.0.0.1:3000/#/article/num1 (This is not necessarily the case , but # is indispensable)

The direct problem caused by this difference is that when it is in the second-level or multi-level routing state, refresh the page, 6177ae8eed0322e277a7e6c21878d6d7 will send the current route to the server (because it is pathname), but 4915f05e1fd45774514682b289f54a27 will not (because it is a hash segment).

We certainly don’t want the front-end routes to be sent to the backend.

There is this paragraph in the documentation of react-router 4.0:

Note: Using hash to record navigation history does not support location.key and location.state. In previous releases we provided shims for this behavior, but there were still some issues we couldn't resolve. Any code or plugins that rely on this behavior will not function properly. Since this technology is only designed to support legacy browsers, e39972b58835f779f5cb270543abb76e can be used instead when used in browsers.

This requires the server to cooperate with the front-end to make some simple modifications.

The idea of ​​the modification is to reload the entry html file (my background is nodejs) when the requested url is not functional, but a front-end route.

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  //判断是主动导向404页面，还是传来的前端路由。
　　 //如果是前端路由则如下处理

  fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
    if(err){
      console.log(err);
      res.send('后台错误');
    } else {
      res.writeHead(200, {
        'Content-type': 'text/html',
        'Connection':'keep-alive'
      });
      res.end(data);
    }
  })
});

There are countless pitfalls here. After searching for methods on the Internet, I switched to nginx and used the try_files field to direct to the entry html. However, after the redirection, the js file packaged by webpack was not executed.

When checking firebug, I found that "Connection":"keep-alive" is set in the response header of this refresh;

I think the problem should be here, switch to nodejs and use 200 status to match keep-alive really solved the problem.

Refreshing the page under react-router 4.0 multi-level routing will not cause 404, but will save the front-end state.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

React Native’s cross-domain resource error issues

##Install the latest version of npm in nodejs (detailed tutorial)

How to implement function debounce in js (detailed tutorial)

How to mark and record the scroll position in vue-scroller

What should I do if the WeChat applet fails to pass the review?

How to change the sliding content using swiper (detailed tutorial)

How to implement a background video login page using Vue.js 2.0

The above is the detailed content of How BrowserRouter cooperates with react-router server. For more information, please follow other related articles on the PHP Chinese website!