Page reload fails when calling a react component from the Link and passing the props

Question

I am very new to react and type script, I am facing an issue where the page reloads fails when i refresh the browser, I believe the not setting the state of the class I am reloading properly. Can you please help with the below code.

I am sending props from Link and making the component to load. Something like the below.

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

This is my router.

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

Compnent I am calling which works fine for the first time for page loading.

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;

it loads fine for thje first time and whenever i reload the same page it fails, saying that what ever the props i have sent is undefined. I believe the props are not available second time.

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)

To add to the the data in the page will not change at all, there won't be any new data, if i render what ever i do in the first attempt and if i have that that fine and its all i need. — CoderTest

Prateek Thapa Prateek Thapa · Accepted Answer · 2020-09-02T08:24:16

Few ways you could pass data from one page to another considering page refresh in React or any other application in the browser is via one of these :-

query params in the URL.
localStorage / session storage.
cookies

without the use of any backend server.

Note: Link in react-router only passes props when the page doesn't refresh. Because when the page refreshes the whole React tree is re-initialized which basically means it restarts your app. Keeping that in mind, Link in react-router will never have any idea of the data you passed via props.

Page reload fails when calling a react component from the Link and passing the props

1 Answers