gpt4 book ai didi

javascript - react 文件导入问题

转载 作者:太空宇宙 更新时间:2023-11-03 22:20:44 24 4
gpt4 key购买 nike

我是 React 的新手,在尝试导入“子组件”时遇到了问题,因为找不到更好的词。

在我的 App.js 文件中,我导入了我的头文件类:import Header from './Components/Header/Header';效果很好。

在我的 Header.js 文件中,我使用路由器来选择不同的组件。但是,当我尝试导入我的 Home 类时: import Home from '../Subcomponents/HomePage/HomePage';我收到以下错误:找不到模块:无法解析 '../Subcomponents/HomePage/HomePage'

我的文件结构是:

  • 应用程序.js
  • 组件/Header/Header.js
  • 子组件/HomePage/HomePage.js

App.js 代码:

import React, { Component } from 'react';

import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';
import Body from './Components/Body/Body';

import './Assets/css/mainCSS.css';

class App extends Component {
render() {
return (
<div className="App">

<Header />

<Body />

<Footer/>

</div>
);
}
}

export default App;

标题代码:

import React from 'react';
import Home from '../Subcomponents/HomePage/HomePage';

import { Router, Route, Link } from 'react-router-dom';


const header = () => {
return <header>
<Router>
<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
</ul>

<hr />

<Route excat path ="/" component={Home} />

</nav>
</Router>
</header>

}

export default header;

首页代码:

import React from 'react';

const homepage =() =>{
return <p>
homepage working

</p>
}

export default homepage;

我是不是做错了什么,或者这在 React 中是不可能的?任何建议将不胜感激!

谢谢!

最佳答案

Header.js 中,../ 将您带入 Components,而不是父级。它应该是 '../../Subcomponents/HomePage/HomePage'

此外,恕我直言:在每个组件文件夹中,将文件命名为 index.js 以便自动导出。比你能做到的:'../../Subcomponents/HomePage'

关于javascript - react 文件导入问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53901727/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com