I'm having trouble importing in React-CodePudding

enter image description here

import Movies from "src/components/Movies/Movies.jsx";
import MyLibrary from "src/components/MyLibrary/MyLibrary.jsx";

I want to call the Movies and MyLbrary components from the navbar, but I'm having trouble. Indeed, what should it be?

CodePudding user response：

You should write not absolute, but related path. Try this

import Movies from "../Movies/Movies.jsx";
import MyLibrary from "../MyLibrary/MyLibrary.jsx";

CodePudding user response：

The better way would be to add an index.js file and in that index.js file you can import the component (in your case - Movies) and then you can directly call the Folder and the component will be rendered automatically

|
|-Movies
  -Movies.jsx
  -index.js
|-MyLibrary
  -MyLibrary.jsx
  -index.js
|-other components

The code in the index.js file would be like below

import Movies from './Movies'
export default Movies //This is for movies index same will be repeated for MyLibrary

The advantage of this would be you can easily understand which component you are refering to and this will simplify the codebase once it gets big