javascript - 反应路由器本机错误,意外令牌
问题描述
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 | */ | function NativeRouter(props) {
返回 <MemoryRouter {...props} />; | } |"**
解决方案
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>
推荐阅读
- c++ - 如何强制编译器将“4 向量”包装类作为单个 XMM 寄存器传递?
- php - 在另一个函数中使用数组数据
- powershell - 使用powershell递归更改lastwritedate
- django - 如何为 SMTP 配置 Django 和 G Suite
- html - Flexbox 调整元素宽度以不留空白
- ios - swift parse json - 无法读取数据,因为它的格式不正确
- java - 正则表达式从路径获取带或不带扩展名的文件名
- android - 为什么 CameraX 不能在 Android Studio 中将图片放大到我需要的大小?
- reactjs - 具有高阶函数的泛型
- android - 为什么我在小米设备上无法获取系统区域?