problem description

after the react-router4 code is split, the routing component is loaded asynchronously, and the root component is setState, which will cause the asynchronously loaded routing component to re-render

the environmental background of the problems and what methods you have tried

https://lihqi.github.io/react.
reference Code
https://reacttraining.com/rea.
https://serverless-stack.com/.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
App.js

import React, { Component } from "react";
import { HashRouter as Router, Route, Link } from "react-router-dom";
// import Home from "./Home"
import About from "./About";
import asyncComponent from "./AsyncComponent";
class App extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        };
    }
    handleClick() {
        let { count } = this.state;
        this.setState({
            count: count + 1
        });
    }
    render() {
        return (
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                    </ul>
                    <div>{this.state.count}</div>
                    <div
                        style={{
                            width: "60px",
                            height: "60px",
                            background: "red"
                        }}
                        onClick={this.handleClick.bind(this)}
                    >
                        +
                    </div>
                    <hr />

                    <Route
                        exact
                        path="/"
                        component={asyncComponent(() =>
                            import(/* webpackChunkName: "Home" */ "./Home")
                        )}
                    />
                    <Route path="/about" component={About} />
                </div>
            </Router>
        );
    }
}

export default App;

AsyncComponent.js

/**
 * 
 */
import React, { Component } from "react";
export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }
    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
  return AsyncComponent;
}

Home.js

import React, { Component } from "react";

export default class Home extends Component {
    componentDidMount(){
        console.log("Home componentDidMount")
    }
    render() {
        return (
            <div>
                <h2>Home</h2>
            </div>
        );
    }
}

About.js

import React, { Component } from "react";

export default class About extends Component {
    componentDidMount(){
        console.log("About componentDidMount")
    }
    render() {
        return (
            <div>
                <h2>About</h2>
            </div>
        );
    }
}

what result do you expect? What is the error message actually seen?

in demo
Click the plus sign to change the state of the component
if the current route is Home (asynchronous routing component)
, you will find that Home has been re-rendering
if the current route is About (Synchronize routing component)
, there will not be this problem