从链接调用React组件并传递道具时，页面重新加载失败

如何解决从链接调用React组件并传递道具时，页面重新加载失败

我对反应和键入脚本非常陌生，我遇到一个问题，当刷新浏览器时页面重新加载失败，我相信未设置要正确重新加载的类的状态。您能帮忙下面的代码吗？

我正在从链接发送道具，并使组件加载。像下面这样。

{
    id: 'jobRunId',header: 'Job Run ID',cell: item => <Link to ={{
      pathname: "/workItemsPage/" + item.jobRunId,workitem: item.workItems
    }}>{item.jobRunId}</Link>,allowLineWrap: true
  },

这是我的路由器。

<Route path="/workItemsPage/:jobId" component={workItemsPage} />

我正在调用的组件第一次可以很好地加载页面。

export class workItemsPage extends React.Component {

    render() {
        /**
         * Iterate over the list of workitems to display
         */
        var workItemList = this.props.location.workitem;
        var workItemIteration = [];
        for (var i = 0; i < workItemList.length; i++) {
            workItemIteration.push(<WorkItemDetails workItem = { workItemList[i] } key = {i}/>);
        }
        return (
            <div>
                <WorkItemsBreadcrumbs />
                <PageHeader jobId = {this.props.match.params.jobId}/>
                <div>
                    {workItemIteration}
                </div>
            </div>
        );
    }
}

export default workItemsPage;

第一次加载正常，每当我重新加载同一页面时，它就会失败，并说我发送的道具是不确定的。我相信道具第二次不可用。

workItemsPage.jsx:18 Uncaught TypeError: Cannot read property 'length' of undefined
    at workItemsPage.render (workItemsPage.jsx:18)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at unbatchedUpdates (react-dom.development.js:21909)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)

解决方法

考虑到page refresh在React或浏览器中的任何其他应用程序中，通过几种方法可以将数据从一页传递到另一种方法：-

• 查询URL中的参数。
• localStorage /会话存储。
• cookies

不使用任何后端服务器。

注意：react-router中的Link仅在页面不刷新时传递道具。因为当页面刷新时，整个React树会重新初始化，这基本上意味着它将重新启动您的应用程序。请记住，react-router中的Link对您通过props传递的数据一无所知。