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

我对反应和输入脚本非常陌生，我面临一个问题，当我刷新浏览器时页面重新加载失败，我相信没有正确设置我正在重新加载的类的状态。你能帮我输入下面的代码吗

我正在从链接发送道具，并使组件加载。类似下面的例子

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

---

考虑到React或浏览器中的任何其他应用程序中的

页面刷新

，将数据从一个页面传递到另一个页面的方法很少：-

• 在URL中查询参数
• 本地存储/会话存储
• 饼干

不使用任何后端服务器

---

注意：react router中的

链接

仅在页面不刷新时传递道具。因为当页面刷新时，整个

React

树被重新初始化，这基本上意味着它会重新启动你的应用程序。请记住，react router中的

链接

永远不会知道您通过道具传递的数据。

要添加到页面中，页面中的数据不会发生任何更改，不会有任何新数据，如果我在第一次尝试中呈现了我所做的一切，如果我有那么好的效果，这就是我所需要的。有没有一种方法可以禁用该页面的重新加载？

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