Trang chủ không chứa bản xuất có tên Trang chủ

Tôi đã làm việc với create-react-appvà gặp vấn đề này ở nơi tôi nhận được Home does not contain an export named Home.

Đây là cách tôi thiết lập App.jstệp của mình :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

Bây giờ trong layoutsthư mục của tôi, tôi có Home.jstệp. được thiết lập như sau.

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export default Home;

Như bạn có thể thấy, tôi đang xuất Homethành phần nhưng tôi gặp lỗi trong bảng điều khiển của mình khi nói điều này.

Điều gì đang xảy ra?

Lỗi cho bạn biết rằng bạn đang nhập sai. Mã bạn có bây giờ:

import { Home } from './layouts/Home';

Không chính xác vì bạn đang xuất dưới dạng xuất mặc định, không phải dưới dạng xuất được đặt tên. Kiểm tra dòng này:

export default Home;

Bạn đang xuất dưới dạng mặc định , không phải dưới dạng tên. Do đó, nhập Homenhư thế này:

import Home from './layouts/Home';

Chú ý không có dấu ngoặc nhọn. Đọc thêm về importvà export.

Sử dụng

import Home from './layouts/Home'

hơn là

import { Home } from './layouts/Home'

Xóa {}khỏi Trang chủ

Đây là trường hợp bạn trộn các bản xuất mặc định và đặt tên xuất .

Khi xử lý các bản namedxuất, nếu bạn cố gắng nhập chúng, bạn nên sử dụng dấu ngoặc nhọn như bên dưới,

import { Home } from './layouts/Home'; // if the Home is a named export

Trong trường hợp của bạn, Trang chủ được xuất dưới dạng mặc định. Đây là cái sẽ được nhập từ mô-đun, khi bạn không chỉ định tên nhất định của một đoạn mã nhất định. Khi bạn nhập và bỏ qua dấu ngoặc nhọn, nó sẽ tìm kiếm xuất mặc định trong mô-đun bạn đang nhập. Vì vậy, quá trình nhập của bạn phải,

import Home from './layouts/Home'; // if the Home is a default export

Một số tài liệu tham khảo để xem xét:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

Tôi vừa gặp thông báo lỗi này (sau khi nâng cấp lên nextjs 9, một số nhập được chuyển đổi bắt đầu gây ra lỗi này). Tôi đã quản lý để sửa chúng bằng cú pháp như sau:

import * as Home from './layouts/Home';

Chúng tôi cũng có thể sử dụng

import { Home } from './layouts/Home'; 

sử dụng từ khóa export trước từ khóa class.

export class Home extends React.Component{
    render(){
        ........
    }
}

Đối với mặc định

 import Home from './layouts/Home'; 

Lớp xuất mặc định

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

Cả hai trường hợp không cần viết

export default Home;

sau giờ học.

Bạn có thể sử dụng hai cách để giải quyết vấn đề này, cách đầu tiên mà tôi nghĩ là cách tốt nhất là thay thế nhập phân đoạn mã của bạn bằng một cách dưới đây:

import Home from './layouts/Home'

hoặc xuất thành phần của bạn mà không có mặc định được gọi là xuất có tên như thế này

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export {Home};

Đây là giải pháp:

• Truy cập tệp của bạn Home.js
• Đảm bảo rằng bạn xuất tệp của mình như thế này vào cuối tệp:

export default Home;