React router native error, Unexpected Token

Question

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>
    );
  }
}

**In the above code, I'm using firebase authentication. And if the user is logged in then i need the app to be routed to app component else, the app to be routed to Login component. And I'm using react-router-native as npm package to route here. But I'm getting error as "D:/csearch-client/csearch-client/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 <MemoryRouter {...props} />; | } |"**

Giovanni Esposito · Answer 1 · 2020-07-15T06:51:28.817

0

Ciao, I think you could do something like this:

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

edited Jul 15 '20 at 06:51

answered Jul 14 '20 at 14:42

Giovanni Esposito

10,696
1
14
30

Ok, have you seen [this](https://stackoverflow.com/questions/60879759/react-router-native-nativerouter-js-module-parse-failed-unexpected-token) ? – Giovanni Esposito Jul 14 '20 at 15:18
I saw that sir but I didn't get that which is global project directory and which is Frontend directory – MANOJ H M Jul 15 '20 at 03:58
Yeah, it's a strange answer but I tought "maybe he knows which is the difference between global and frontend directory". Anyway, searching a bit I found this [discussion](https://github.com/ReactTraining/react-router/issues/5684). Maybe could help. Otherwise may I suggest to change navigation library? I usually use [react-navigation](https://reactnavigation.org/). Take a look to this library, it veryveryvery easy. – Giovanni Esposito Jul 15 '20 at 07:05
Okay, If i use react navigation, then ow to define routes and how to pass objects in link. I failed to find documentation for that. – MANOJ H M Jul 15 '20 at 07:54
Write code here it's a little tricky so I suggest you to see the example [here](https://reactnavigation.org/docs/hello-react-navigation). It's very similar to NativeRouter and you can easly understand. – Giovanni Esposito Jul 15 '20 at 09:15

React router native error, Unexpected Token

1 Answers1