Adding <Page /> Component breaks front page behavior

I recently added the following logic to my index.js in order to differentiate between the Page and Post components:

              {data.isFetching && <Loading />}
              {data.isArchive && <Archive />}
              {data.isPage && <Page />}
              {data.isPostType &&  />}
              {data.is404 && <Page404 />}

The data={data} stuff is just there because I added page transitions. The problem is the addition of data.isPage. When I add that in I get a bug.

If I’m on the front page <Archive /> and I click a link to a <Post /> then it works fine. If I a menu button that is linked to a specific page then it works. But if after clicking any of these I click the logo in the top left hand corner to take me back to the homepage I get a blank page as a response.

This is the Error I get from the Console:

Page.js?486c:27 Uncaught TypeError: Cannot read property 'title' of undefined
    at Page (Page.js?486c:27)
    at runAsReaction (reactionRunner.js?30ae:55)
    at reaction (observer.js?724e:11)
    at eval (connect.js?84b5:70)
    at renderWithHooks (react-dom.development.js?61bb:16241)
    at updateFunctionComponent (react-dom.development.js?61bb:18328)
    at updateSimpleMemoComponent (react-dom.development.js?61bb:18266)
    at beginWork$1 (react-dom.development.js?61bb:20228)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
    at eval (scheduler.js?f1c4:10)
Page @ Page.js?486c:27
runAsReaction @ reactionRunner.js?30ae:55
reaction @ observer.js?724e:11
eval @ connect.js?84b5:70
renderWithHooks @ react-dom.development.js?61bb:16241
updateFunctionComponent @ react-dom.development.js?61bb:18328
updateSimpleMemoComponent @ react-dom.development.js?61bb:18266
beginWork$1 @ react-dom.development.js?61bb:20228
callCallback @ react-dom.development.js?61bb:336
eval @ scheduler.js?f1c4:10
batchedUpdates$1 @ react-dom.development.js?61bb:24353
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
invokeGuardedCallbackDev @ react-dom.development.js?61bb:385
invokeGuardedCallback @ react-dom.development.js?61bb:440
beginWork$$1 @ react-dom.development.js?61bb:25738
performUnitOfWork @ react-dom.development.js?61bb:24662
workLoopSync @ react-dom.development.js?61bb:24638
performSyncWorkOnRoot @ react-dom.development.js?61bb:24237
eval @ react-dom.development.js?61bb:12180
unstable_runWithPriority @ scheduler.development.js?3069:818
runWithPriority$2 @ react-dom.development.js?61bb:12130
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:12175
flushSyncCallbackQueue @ react-dom.development.js?61bb:12163
batchedUpdates$1 @ react-dom.development.js?61bb:24359
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
backend.js:6 The above error occurred in one of your React components:
    in Unknown
    in div (created by Context.Consumer)
    in Absolute
    in div (created by ForwardRef)
    in ForwardRef
    in Unknown (created by App)
    in HelmetProvider (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ backend.js:6
logCapturedError @ react-dom.development.js?61bb:21810
logError @ react-dom.development.js?61bb:21847
update.callback @ react-dom.development.js?61bb:23199
callCallback @ react-dom.development.js?61bb:13810
commitUpdateEffects @ react-dom.development.js?61bb:13848
commitUpdateQueue @ react-dom.development.js?61bb:13838
commitLifeCycles @ react-dom.development.js?61bb:22127
commitLayoutEffects @ react-dom.development.js?61bb:25302
callCallback @ react-dom.development.js?61bb:336
eval @ scheduler.js?f1c4:10
batchedUpdates$1 @ react-dom.development.js?61bb:24353
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
invokeGuardedCallbackDev @ react-dom.development.js?61bb:385
invokeGuardedCallback @ react-dom.development.js?61bb:440
commitRootImpl @ react-dom.development.js?61bb:25040
unstable_runWithPriority @ scheduler.development.js?3069:818
runWithPriority$2 @ react-dom.development.js?61bb:12130
commitRoot @ react-dom.development.js?61bb:24889
finishSyncRender @ react-dom.development.js?61bb:24296
performSyncWorkOnRoot @ react-dom.development.js?61bb:24274
eval @ react-dom.development.js?61bb:12180
unstable_runWithPriority @ scheduler.development.js?3069:818
runWithPriority$2 @ react-dom.development.js?61bb:12130
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:12175
flushSyncCallbackQueue @ react-dom.development.js?61bb:12163
batchedUpdates$1 @ react-dom.development.js?61bb:24359
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
react-dom.development.js?61bb:12193 Uncaught TypeError: Cannot read property 'title' of undefined
    at Page (Page.js?486c:27)
    at runAsReaction (reactionRunner.js?30ae:55)
    at reaction (observer.js?724e:11)
    at eval (connect.js?84b5:70)
    at renderWithHooks (react-dom.development.js?61bb:16241)
    at updateFunctionComponent (react-dom.development.js?61bb:18328)
    at updateSimpleMemoComponent (react-dom.development.js?61bb:18266)
    at beginWork$1 (react-dom.development.js?61bb:20228)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
    at eval (scheduler.js?f1c4:10)

I’m guessing the problem here is that it thinks that the frontpage archive is a Page and not an Archive component?

I seem to have fixed it when I refactored it to this:

{(data.isFetching && <Loading />) ||
                (data.isArchive && <Archive data={data} />) ||
                (data.isPage && <Page data={data} />) ||
                (data.isPostType && <Post data={data} />) ||
                (data.is404 && <Page404 />)}
1 Like