Dec 19, 2021 11:19 AM
I’m trying to create a Single Page App in Airtable because I want to be able to change which components are displayed to the user dynamically. My approach is to use react-router-dom’s MemoryRouter, NavLink and Switch.
Here is my code.
import {
initializeBlock
} from '@airtable/blocks/ui';
import React, {Component} from 'react';
import { MemoryRouter, Route, Switch, NavLink} from 'react-router-dom';
import ReactDOM from 'react-dom';
class Home extends Component {
render() {
return (
<div>Welcome to Home page</div>
)
}
}
class About extends Component {
render() {
return (
<div>Welcome to About page</div>
)
}
}
function MyApp() {
return (
<MemoryRouter>
<div>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
</div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</MemoryRouter>
);
}
initializeBlock(() => <MyApp />);
It works without the Switch tags but with them I get the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `MyApp`.
at createFiberFromTypeAndProps (https://localhost:9000/__runFrame/bundle.js:71149:21)
at createFiberFromElement (https://localhost:9000/__runFrame/bundle.js:71172:15)
at createChild (https://localhost:9000/__runFrame/bundle.js:60812:28)
at reconcileChildrenArray (https://localhost:9000/__runFrame/bundle.js:61084:25)
at reconcileChildFibers (https://localhost:9000/__runFrame/bundle.js:61489:14)
at reconcileChildren (https://localhost:9000/__runFrame/bundle.js:63946:28)
at updateContextProvider (https://localhost:9000/__runFrame/bundle.js:65440:3)
at beginWork (https://localhost:9000/__runFrame/bundle.js:65842:14)
at HTMLUnknownElement.callCallback (https://localhost:9000/__runFrame/bundle.js:47372:14)
at HTMLUnknownElement.e._wrapped (https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/1.9.0/rollbar.nojson.min.js:1:13806)
at Object.invokeGuardedCallbackDev (https://localhost:9000/__runFrame/bundle.js:47421:16)
at invokeGuardedCallback (https://localhost:9000/__runFrame/bundle.js:47476:31)
at beginWork$1 (https://localhost:9000/__runFrame/bundle.js:70387:7)
at performUnitOfWork (https://localhost:9000/__runFrame/bundle.js:69338:12)
at workLoopSync (https://localhost:9000/__runFrame/bundle.js:69314:22)
at performSyncWorkOnRoot (https://localhost:9000/__runFrame/bundle.js:68940:9)
at https://localhost:9000/__runFrame/bundle.js:58273:24
at unstable_runWithPriority (https://localhost:9000/__runFrame/bundle.js:80164:12)
at runWithPriority$1 (https://localhost:9000/__runFrame/bundle.js:58223:10)
at flushSyncCallbackQueueImpl (https://localhost:9000/__runFrame/bundle.js:58268:7)
at workLoop (https://localhost:9000/__runFrame/bundle.js:80108:34)
at flushWork (https://localhost:9000/__runFrame/bundle.js:80063:16)
at MessagePort.performWorkUntilDeadline (https://localhost:9000/__runFrame/bundle.js:79675:27)
Any ideas on what the problem could be? Much appreciated!
May 30, 2023 11:55 PM
Did you find a solution to this?