React-router-dom Switch tag causes render error

[Peder_Linder]

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!

[f2016862]

Did you find a solution to this?