react-router-native，NativeRouter.js 模块解析失败 - 意外令牌

Question

我在使用 react native 路由器时遇到了意外的令牌错误。 Expo 被用来在我的浏览器中呈现页面。我对 React 和 React Native 真的很陌生，所以我有点在黑暗中拍摄我为解决这个问题所做的一切。我发现了一个类似的问题（Failed to compile ./node_modules/react-router-native/NativeRouter.js #5684 https://github.com/ReactTraining/react-router/issues/5684），但本应解决问题的链接不起作用。这是我得到的错误：

/node_modules/react-router-native/NativeRouter.js 11:9 模块解析失败：意外令牌 (11:9) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

| */ |函数 NativeRouter(props) {

返回； | } |

我没有对打包文件进行任何更改，因此我假设我在 App.js 文件中的代码有问题。我的 App.js 代码是这样的：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NativeRouter, Route, Link } from 'react-router-native';
import Login from './login';
import Dashboard from './dashboard';
import Home from './home';



function App() {
  return (
    <div>
<NativeRouter>
    <View style={styles.container}>
      <View style={styles.nav}>
        <Link to="/" underlayColor="#f0f4f7" style={styles.navItem}>
          <Text>Home</Text>
        </Link>
        <Link
          to="/Login"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Login</Text>
        </Link>
        <Link
          to="/Dashboard"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Dashboard</Text>
        </Link>
      </View>

      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/dashboard" component={Dashboard} />
    </View>
  </NativeRouter>

    </div>
  );
}

export default App;

我的预期结果是看到导航栏正确呈现，而不是出现意外的令牌错误。

Answer 1

我已经回答了我自己的问题！我将 react-navigation 安装到全局项目文件夹中，而不是应该运行的前端目录中。现在，效果很好！