Why is the route child component rendered before the parent component in react-router?

encountered a very troublesome problem.

react developer, I wrote a request in the app.js of router in the root directory to see if I was logged in. If you log in, store the returned data in redux"s store, and if you are not logged in, skip back to / home page.

App.js

class App extends React.Component {
  componentDidMount () {
    // 
    if ("addEventListener" in document) {
      document.addEventListener("DOMContentLoaded", function () {
        FastClick.attach(document.body)
      }, false)
    }
    
    api.isLogin().then((res) => {
      
      if (res.status==1) {
        
        console.log("not jump");
        
        const { store } = this.context;
        res.data.login = true;
        this.props.saveUser(res.data);    //store
        
      }else
      {
        const { store } = this.context;
        res.data.login = false;
        this.props.saveUser(null);    //storenull
        
        console.log("set");

        var urlName = location.hash.split("/");
        if (urlName[1]=="View") {
          
        }else{
          console.log("jump");
          
          hashHistory.push("/");     //
        }

      }
      console.log(res)
    }, (err) => {
      console.log(err);
    })
  }



  shouldComponentUpdate () {
    return false
  }

  render () {
    return (
        <Router history={hashHistory} basename="/product/dist">
          {/*  */}
          <Route path="/" component={Home} > 
            {/* <Route path="/login" component={Login}/> */}
          </Route>

          <Route path="/User/:actid" component={User} > 
            {/* <Route path="/login" component={Login}/> */}
          </Route>

          <Route path="/Editor/:actid/:editArt" component={Editor} > 
            {/* <Route path="/login" component={Login}/> */}
          </Route>

          <Route path="/View/:actid/:artid" component={View} > 
            {/* <Route path="/login" component={Login}/> */}
          </Route>

          {/* 404 */}
          <Route path="*" component={NotFound}/> 

        </Router>
    )
  }
}
const mapStateToProps = (state) => {
  return {
      setUser: state.User
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
      saveUser: (data) => {
          dispatch(saveUser(data))
      },
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
App.contextTypes = { store: PropTypes.object.isRequired }
// export default App

then a local route is written in the home page, and the component is rendered according to state. The problem now is that every home.js is rendered before App.js, so the data taken by home.js is the initial data of store

home.js

componentDidMount()
  {
    const { store } = this.context;
    
    console.log(store.getState().webState.user_data);
    
    if(store.getState().webState.user_data)
    {
      this.setState({pageState:"SelectAct"});
    }else
    {
      this.setState({pageState:"Index"});
    };
  }

LocalRouter()
  {
      switch (this.state.pageState) {
        case "Index":
          return <MainKV />;
          break;
        case "Login":
          return <Login attrLogin={this.changeState}/>;
          break;
        case "SelectAct":
          return <SelectAct />;
          break;
      }
  }

strangely, I localized stroe in localstorage (the data in store will not be initialized in order to refresh it)

STATE.JS (redux)

import {SAVEUSER,SAVEACTID } from "../actions/STATE";
/*
* state
 */

const initState = {
    
    user_data:null,
    ActID:null,
    baseURL:"http://wechat.crnonline.org/"
};

function localUpdata(state)
{
        var locStore = JSON.parse(localStorage.getItem("persist:root"));
        console.log(state);
        
        locStore.webState = JSON.stringify(state);
        console.log(locStore.webState);
        
    
        localStorage.setItem("persist:root",locStore.webState);
        console.log(localStorage.getItem("persist:root"));
}
/*
* reducer
 */
export default function reducer(state = initState, action) {
    switch (action.type) {

        case SAVEUSER:
            state.user_data = action.UserData;
            localUpdata(state);
            return state;
        case SAVEACTID:
            state.ActID = action.ActID;
            localUpdata(state);
            return state;
        default:
            return state
    }
}

the data from the code log is different from the data seen in the debugging tool

because the user_data that home.js has been getting is null, but there is data stored in store.

React.js

Mar.06,2021