我正在完成一个应用程序的教程,当在前端工作时,我为导航栏制作了一个单独的文件:
import React, { Component } from 'react'
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a
className="navbar-brand col-sm-3 col-md-2 mr-0"
href="http://www.dappuniversity.com/bootcamp"
target="_blank"
rel="noopener noreferrer"
>
EthSwap
</a>
</nav>
);
}
}
export default Navbar;
我已将此文件导入到App.js文件中:
import React, { Component } from 'react'
import Web3 from 'web3'
import Navbar from ' ./Navbar'
import './App.css'
当我保存并重新加载网页时,出现以下错误:
页面没有找到!无法解析“C:\Users\34632\eth_swap1\src\components”中的.“/导航栏”
我不知道是甚么问题,因为我昨天已顺利地过了这一关,但现在问题仍然存在,有没有人知道这是甚么情况?
这是我的电话簿。
下面是App.js文件
import React, { Component } from 'react'
import Web3 from 'web3'
import from ' ./Navbar'
import './App.css'
class App extends Component {
async componentWillMount() {
await this.loadWeb3()
await this.loadBlockchainData()
}
async loadBlockchainData() {
const web3 = window.web3
const accounts = await web3.eth.getAccounts()
this.setState({ account: accounts[0] })
const ethBalance = await web3.eth.getBalance(this.state.account)
this.setState({ ethBalance })
console.log(this.state.ethBalance)
}
async loadWeb3() {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum)
await window.ethereum.enable()
}
else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider)
}
else {
window.alert('Non-Ethereum browser detected. You should consider trying Metamask!')
}
}
constructor(props) {
super(props)
this.state = {
account: '',
ethBalance: '0'
}
}
render() {
console.log(this.state.account)
return (
<div>
<Navbar />
<div className="container-fluid mt-5">
<div className="row">
<main role="main" className="col-lg-12 d-flex text-center">
<div className="content mr-auto ml-auto">
<a
href="http://www.dappuniversity.com/bootcamp"
target="_blank"
rel="noopener noreferrer"
>
</a>
<h1>Hello World!</h1>
</div>
</main>
</div>
</div>
</div>
);
}
}
export default App;
2条答案
按热度按时间rdrgkggo1#
从导入中移除空间
发件人:
致:
6mw9ycah2#
如果你正在阅读这篇文章https://www.geeksforgeeks.org/how-to-create-a-multi-page-website-using-react-js/,你可能会遇到OP所面临的错误:没有正确地构建项目。
未找到/src/组件/App. js模块:无法解析“C:\Users\34632\eth_swap1\src\components”中的.“/导航栏”
NavbarElement.js文件位于components/Navbar/下,而不是直接位于components/下。
请看这里的结构,解决方案是在组件下创建一个子文件夹“Navbar”,并移动两个js文件: