react-router-native, NativeRouter.js 模块解析失败 - 意外令牌 [英] react-router-native, NativeRouter.js Module parse failed - unexpected token

问题描述

我在使用 React Native 路由器时遇到意外的令牌错误.Expo 用于在我的浏览器中呈现页面.我对 React 和 React Native 真的很陌生，所以我在黑暗中拍摄我所做的一切来解决这个问题.我发现了一个类似的问题(无法编译 ./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

|*/|function NativeRouter(props) {

<块引用>

返回；|}|

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

从'react'导入React；import { StyleSheet, Text, View } from 'react-native';从'react-router-native'导入{ NativeRouter, Route, Link };从 './login' 导入登录；从'./dashboard'导入仪表板；从'./home'导入首页；功能应用(){返回 (<div><本地路由器><视图样式={styles.container}><视图样式={styles.nav}><Link to="/" underlayColor="#f0f4f7" style={styles.navItem}><Text>主页</Text></链接><链接到=/登录"underlayColor="#f0f4f7"style={styles.navItem}><文本>登录</文本></链接><链接到=/仪表板"underlayColor="#f0f4f7"style={styles.navItem}><文本>仪表板</文本></链接></查看><路由精确路径="/" component={Home}/><Route path="/login" component={Login}/><Route path="/dashboard" component={Dashboard}/></查看></NativeRouter>

);}导出默认应用程序；

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

解决方案

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

I'm getting an unexpected token error while using react native router. Expo is being used to render the page in my browser. I'm really new to React and React Native, so I'm kind of shooting in the dark with everything that I do to fix this. I found a similar issue (Failed to compile ./node_modules/react-router-native/NativeRouter.js #5684 https://github.com/ReactTraining/react-router/issues/5684), but the link that supposedly fixed the issue didn't work. This is the error that I'm getting:

/node_modules/react-router-native/NativeRouter.js 11:9 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 ; | } |

I made no changes to the packaged files, so I'm assuming that I've done something wrong with my code on the App.js file. My code for App.js is this:

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;

My expected result would be to see the Nav bar render properly instead of getting the unexpected token error.

解决方案

I've answered my own question! I was installing react-navigation into the global project folder instead of in the front end directory where it was supposed to run. Now, it works great!

这篇关于react-router-native, NativeRouter.js 模块解析失败 - 意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！