我是 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/