Reactjs 更改url后如何再次呈现组件

这是我的路线.js

var Routes = (
    <Router history={hashHistory}>
    <Route path="/" component={Authenticate}/>
    <Route path="forgotpassword" component={ForgotPassword}/>
    <Route path="resetpassword/:tokenId" component={ResetPassword}/>
    <Route path="login" component={Login}/>
    <Route path="loginaccount/:tokenId" component={DirectLogin}/>
    <Route path="dashboard" component={UserBase}>
        <IndexRoute component={Dashboard} />
        <Route path="changepassword" component={ChangePassword}/>
    </Route>
    <Route path='*' component={NotFound} />
    </Router>
);

var路由=(
);

所以，当我调用UserBase和dashboard loads时，调用ajax请求来加载数据。之后当我把url改成它的时候，加载ChangePassword组件一切都好

但当我再次回到仪表板时，我的数据丢失了，显示的是空白的UI设计

这里是仪表板组件

var React = require('react');
import Grid from "./DashboardGrid.js";
import PopupOver from '../common/PopupOver.js';
import Loader from '../common/Loader.js';
import ListBox from "../common/ListBox.js";
import Auth from "../common/Cookies.js";
import LoadFile from '../common/LoadFile.js';
import ERRORS from '../common/Errors.js';
import Const from '../constants/Constants';
import ErrorMessage from '../constants/ErrorMessage';
import LINK from '../constants/LinkConstants';

var Router = require('react-router');

class Dashboard extends React.Component{

    constructor(){
        console.log("called..dashboard")
        super();
        this.tab2Chart = 0;
        this.state = {typeData:'-1', lastPeriod:'2', gridData:[], graphLoad:false, showLoader:false}
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps)
        if (nextProps.gridData !== this.props.gridData) {
            this.setState({gridData:nextProps.gridData, typeData:'-1', lastPeriod:'2',});
            this.datePicker(2);

        }
    }


    render(){

        var entryData = this.state.gridData; //grid data
        var placementData = this.props.placementData; //dropdown data

        var tab3 = 0;
        var tab4 = 0;
        var tab2 = 0;
        var tab0 = 0;
        var tab1 = 0;
        var fromdate;
        var rows = entryData.map(function(eachRow) {
            for (var key in eachRow){
                var comment = eachRow[key];
                tab3 = tab3 + comment.tab3;
                tab4 = tab4 + comment.tab4;
                tab2 = tab2 + comment.tab2;
            }
        });

        if(tab3 && tab2){
            tab0 = parseFloat(tab2/tab3);
        }

        if(tab4 && tab2){
            tab1 = (tab2/tab4)*1000
        }

        var lastPeriod = [
            {name: "Today",value:"0"},
            {name: "Yesterday",value:"1"},
            {name: "Last 7 Days",value:"2"},
            {name: "Last 30 Days",value:"3"},
            {name: "This Month",value:"4"},
            {name: "Last Month",value:"5"},
            {name: "Last Year",value:"6"}
        ]

        var list = [];
        placementData.forEach(function(data){
            var k = {name:data.ad_title, value:data.id};
            list.push(k);
        });

        return (

            <div>
            {this.state.showLoader? <Loader show='true'/> : <Loader show='false'/>}

            <div className="right_col" role="main">
              <div className="row tile_count">
                <div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                  <span className="count_top">Revenue</span>
                  <div className="count green"><i className="fa fa-dollar"/><div className='displayinline'>{numberWithCommas(tab2)}</div></div>
                </div>
                <div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                  <span className="count_top">Impressions</span>
                  <div className="count">{numberWithCommas(tab4)}</div>
                </div>
                <div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                  <span className="count_top">Total Clicks</span>
                  <div className="count">{numberWithCommas(tab3)}</div>
                </div>
                <div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                  <span className="count_top">Net PPC</span>
                  <div className="count"><i className="fa fa-dollar"/><div className='displayinline'>{numberWithCommas(tab0)}</div></div>
                </div>
                <div className="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                  <span className="count_top">Net eCPM</span>
                  <div className="count"><i className="fa fa-dollar"/><div className='displayinline'>{numberWithCommas(tab1)}</div></div>
                </div>
              </div>


                            <div className="item">
                                <div className="x_content">
                                <div className="table-responsive">
                                    <Grid items={entryData}/>
                                </div>
                              </div>
                            </div>
            <div className="clearfix"></div>
        </div>
</div>
        );
    }
}

export default Dashboard;

var React=require（'React'）；
从“/DashboardGrid.js”导入网格；
从“../common/PopupOver.js”导入PopupOver；
从“../common/Loader.js”导入加载程序；
从“./common/ListBox.js”导入列表框；
从“./common/Cookies.js”导入身份验证；
从“../common/LoadFile.js”导入LoadFile；
从“../common/ERRORS.js”导入错误；
从“../constants/constants”导入常量；
从“../constants/ErrorMessage”导入ErrorMessage；
从“../constants/LinkConstants”导入链接；
var-Router=require（'react-Router'）；
类Dashboard扩展了React.Component{
构造函数（）{
log（“调用..仪表板”）
超级（）；
此参数为0.tab2Chart=0；
this.state={typeData:'-1'，lastPeriod:'2'，gridData:[]，graphLoad:false，showLoader:false}
}
组件将接收道具（下一步）{
console.log（nextrops）
if（nextrops.gridData！==this.props.gridData）{
this.setState（{gridData:nextProps.gridData，typeData:'-1'，lastPeriod:'2'，}）；
这个。日期选择器（2）；
}
}
render（）{
var entryData=this.state.gridData；//网格数据
var placementData=this.props.placementData；//下拉数据
var-tab3=0；
var tab4=0；
var-tab2=0；
var-tab0=0；
var tab1=0；
var fromdate；
var rows=entryData.map（函数（eachRow）{
for（每个箭头中的var键）{
var注释=每个箭头[键]；
tab3=tab3+comment.tab3；
tab4=tab4+comment.tab4；
tab2=tab2+comment.tab2；
}
});
如果（表3和表2）{
tab0=parseFloat（tab2/tab3）；
}
如果（表4和表2）{
表1=（表2/4）*1000
}
var lastPeriod=[
{名称：“今天”，值：“0”}，
{名称：“昨天”，值：“1”}，
{名称：“最近7天”，值：“2”}，
{名称：“最近30天”，值：“3”}，
{名称：“本月”，值：“4”}，
{名称：“上个月”，值：“5”}，
{名称：“去年”，值：“6”}
]
var列表=[]；
placementData.forEach（函数（数据）{
var k={name:data.ad_title，value:data.id}；
list.push（k）；
});
返回(
{this.state.showLoader？：}
收入
{numberWithCommas（tab2）}
印象
{numberWithCommas（tab4）}
总点击数
{numberWithCommas（tab3）}
净PPC
{numberWithCommas（tab0）}
净eCPM
{numberWithCommas（tab1）}
);
}
}
导出默认仪表板；

所以在上面的代码中，返回url时tab1变为0。我在反应周期中遗漏了什么

---

如果需要任何其他代码，请告诉我..

如果仪表板需要特定的数据，我认为最好在安装仪表板时进行ajax调用，组件将安装在仪表板类内部可能是一个很好的位置