react-router為什么router子組件先在父組件之前被渲染？

遇到一個(gè)很麻煩的問題。

react開發(fā)，我在根目錄的router的app.js里面寫了一個(gè)請(qǐng)求，查看是否登錄。如果登錄，則把返回的數(shù)據(jù)存儲(chǔ)到redux的store里面，如果未登錄，則跳回/主頁。

App.js

class App extends React.Component {
  componentDidMount () {
    // 初始化快速點(diǎn)擊
    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);    //這個(gè)是store存儲(chǔ)，
        
      }else
      {
        const { store } = this.context;
        res.data.login = false;
        this.props.saveUser(null);    //這個(gè)是store存儲(chǔ)，存null
        
        console.log('set');

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

      }
      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

然后主頁里面寫了一個(gè)本地路由，根據(jù)state來渲染組件，現(xiàn)在的問題是每次 home.js都是在App.js之前渲染，所以home.js拿取的數(shù)據(jù)都是store初始數(shù)據(jù)

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;
      }
  }

奇怪的是，我在localstorage里面本地化了stroe（為了刷新store里的數(shù)據(jù)不會(huì)初始化）

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
    }
}

在代碼log出來的數(shù)據(jù)，和調(diào)試工具里面看的數(shù)據(jù)是不一樣的

因?yàn)閔ome.js一直獲取到的user_data是null，但是store里面存的是有數(shù)據(jù)的。