【问题标题】:React router native error, Unexpected Token反应路由器本机错误,意外令牌
【发布时间】:2020-07-14 14:36:43
【问题描述】:
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Login from "./components/Login";
import Home from "./components/Home";
import { NativeRouter, Switch, Route, Link } from "react-router-native";
im;
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
    };
  }
  componentDidMount() {
    this.authListener();
  }
  authListener() {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user });
      } else {
        this.setState({ user: null });
      }
    });
  }
  render() {
    return (
      <NativeRouter>
        <View style={styles.container}>
          <Switch>
            <Route exact path="/">
              {this.state.user ? <h1><Home/></h1> : <h1><Login/></h1>}
            </Route>
          </Switch>
        </View>
      </NativeRouter>
    );
  }
}

**在上面的代码中,我使用的是 firebase 身份验证。如果用户已登录,那么我需要将应用程序路由到其他应用程序组件,将应用程序路由到登录组件。我使用 react-router-native 作为 npm 包来路由这里。但我收到错误为“D:/csearch-client/csearch-client/node_modules/react-router-native/NativeRouter.js 11:9 模块解析失败:意外令牌 (11:9) 您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders | */ |函数 NativeRouter(props) {

返回 ; | } |"**

【问题讨论】:

    标签: javascript reactjs react-native react-router-native


    【解决方案1】:

    Ciao, 我认为你可以这样做:

          import Login from 'path/to/Login';
          import Home from 'path/to/Home';
          ...
          <Switch>
            <NativeRouter exact path="/" component={this.state.user ? Home : Login}>
            </NativeRouter>
          </Switch>
             
    

    【讨论】:

    • 好的,你看到this了吗?
    • 我看到了先生,但我没有得到哪个是全局项目目录,哪个是前端目录
    • 是的,这是一个奇怪的答案,但我坚持“也许他知道全局目录和前端目录之间的区别”。无论如何,搜索了一下我发现了这个discussion。也许能帮上忙。否则我可以建议更改导航库吗?我通常使用react-navigation。看看这个库,非常非常简单。
    • 好的,如果我使用反应导航,然后定义路由以及如何在链接中传递对象。我没有找到相关的文档。
    • 在这里写代码有点棘手,所以我建议你看例子here。它与 NativeRouter 非常相似,您可以轻松理解。
    猜你喜欢
    • 2015-06-25
    • 2018-03-29
    • 2017-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-28
    相关资源
    最近更新 更多