从react js中的子文件夹导入模块

Question

Hello i am just learning ReactJs, I am trying to import a module from a sub folder in react, here is my folder structure

-src
---components
-----layout
-------Header.js
-------Navigation.js
-----fakeAuth.js

From the Header.js module, i am trying to import the fakeAuth from the parent (component), but it seems it can't call module or am i just missing something?

I already tried the following

import fakeAuth from './fakeAuth'
import fakeAuth from '././fakeAuth'
import fakeAuth from '../../fakeAuth'

Still no luck, i know this will be easy for some. Thanks

here i my fakeAuth.js, which is from the react-router-dom tutorial.

module.exports  = {
    isAuthenticated: false,
    authenticate(cb) {
      this.isAuthenticated = true;
      setTimeout(cb, 100); // fake async
    },
    signout(cb) {
      this.isAuthenticated = false;
      setTimeout(cb, 100);
    }
  };

Answer 1

It should be import fakeAuth from '../fakeAuth'

You just have to go 1 folder up where you have fakeAuth.js file. adding '..' does that.

Answer 2

Since you're using module.exports you can import in the following fashion inside Header.js :

import { isAuthenticated, authenticate, signout  } from "../fakeAuth";

CodeSandbox Demo