使用Expo（React-Native）有条件地将程序包导入PWA和本机应用程序

Question

我正在尝试使用Expo开发一个项目来创建一个简单的Router（具有react-router-native和/或react-router-dom），并且在维护本机和Web平台的软件包时遇到问题。我实现该方法的方法如下所述：当应用程序运行到Android时，它可以正常工作，但是当我在浏览器中运行它时，我收到的错误不仅是加载了本机包，而且还破坏了PWA。出现以下错误：

Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| function NativeRouter(props) {
>   return <MemoryRouter {...props} />;
| }
|

这是所有应用程序的index.js：

import { registerRootComponent } from 'expo';
import React from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

let RouterX = <></>;
let RouteX = <></>;
let LinkX = <></>;

if (Platform.OS === 'web') {
  const { BrowserRouter, Route, Link } = require('react-router-dom');
  RouterX = BrowserRouter;
  RouteX = Route;
  LinkX = Link;
} else {
  const { NativeRouter, Route, Link } = require('react-router-native');
  RouterX = NativeRouter;
  RouteX = Route;
  LinkX = Link;
}

const Home = () => <Text style={styles.header}>{JSON.stringify(Platform)}</Text>;

const About = () => <Text style={styles.header}>About</Text>;

const Topic = ({ match }) => (
  <Text style={styles.topic}>{match.params.topicId}</Text>
);

const Topics = ({ match }) => (
  <View>
    <Text style={styles.header}>Topics</Text>
    <View>
      <LinkX
        to={`${match.url}/rendering`}
        style={styles.subNavItem}
        underlayColor="#f0f4f7"
      >
        <Text>Rendering with React</Text>
      </LinkX>
      <LinkX
        to={`${match.url}/components`}
        style={styles.subNavItem}
        underlayColor="#f0f4f7"
      >
        <Text>Components</Text>
      </LinkX>
      <LinkX
        to={`${match.url}/props-v-state`}
        style={styles.subNavItem}
        underlayColor="#f0f4f7"
      >
        <Text>Props v. State</Text>
      </LinkX>
    </View>

    <RouteX path={`${match.path}/:topicId`} component={Topic} />
    <RouteX
      exact
      path={match.path}
      render={() => (
        <Text style={styles.topic}>Please select a topic.</Text>
      )}
    />
  </View>
);

const App = () => (
  <RouterX>
    <View style={styles.container}>
      <View style={styles.nav}>
        <LinkX to="/" underlayColor="#f0f4f7" style={styles.navItem}>
          <Text>Home</Text>
        </LinkX>
        <LinkX
          to="/about"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>About</Text>
        </LinkX>
        <LinkX
          to="/topics"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Topics</Text>
        </LinkX>
      </View>

      <RouteX exact path="/" component={Home} />
      <RouteX path="/about" component={About} />
      <RouteX path="/topics" component={Topics} />
    </View>
  </RouterX>
);

const styles = StyleSheet.create({
  container: {
    marginTop: 25,
    padding: 10
  },
  header: {
    fontSize: 20
  },
  nav: {
    flexDirection: "row",
    justifyContent: "space-around"
  },
  navItem: {
    flex: 1,
    alignItems: "center",
    padding: 10
  },
  subNavItem: {
    padding: 5
  },
  topic: {
    textAlign: "center",
    fontSize: 15
  }
});

registerRootComponent(App);

我不仅对此代码有疑问，而且还认为这种方法非常幼稚，我尝试使用dynamic-import from ES6，但没有取得太大的成功。