当我尝试运行我的应用程序时,我得到一个错误:未找到模块:无法解析“C:\Users\Owner\portfolio\src\pages”中的“axios”
你们谁能给予我点建议怎么解决这个问题?
谢谢!
下面是我的app.js代码:
import React from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import './App.css';
import Footer from './components/Footer';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'Josh M',
headerLinks: [
{ title: 'Home', path: '/' },
{ title: 'About', path: '/about' },
{ title: 'Contact', path: '/contact' }
],
home: {
title: 'Be Fearless',
subTitle: 'Projects the make a difference',
text: 'Checkout my projects below'
},
about: {
title: 'About Me'
},
contact: {
title: 'Let\'s Talk'
}
}
}
render() {
return (
<Router>
<Container className="p-0" fluid={true}>
<Navbar className="border-bottom" bg="transparent" expand="lg">
<Navbar.Brand>Josh McGuinness</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle">
<Nav className="ml-auto">
<Link className="nav-link" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>
<Link className="nav-link" to="/contact">Contact</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Route path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />} />
<Route path="/about" render={() => <AboutPage title={this.state.about.title} />} />
<Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
<Footer />
</Container>
</Router>
);
}
}
export default App;
非常感谢您的任何帮助是非常非常感谢,我是非常新的React和刚刚学习!谢谢大家提前。
Josh:)
2条答案
按热度按时间tuwxkamq1#
您可能需要将该依赖项安装到项目中,以便使其工作。
运行
npm install axios
或yarn add axios
,具体取决于您是否使用npm/yarn6qfn3psc2#
对我来说,使用yarn(而不是npm)解决了依赖关系。我将列出每一个血淋淋的细节,以帮助那些刚刚开始react之旅的人:
1.删除package-lock.json(rm package-lock.json)
1.Yarn附加轴
1.读取消息以确保添加了axios及其依赖项
1.切换到node_modules目录(cd node_modules),然后列出以确保安装了axios和依赖项(ls)
1.检查你的App.js,确保你的导入有正确的路径(不管你真的应该有一个'../axios'还是只是'axios')
1.停止旧的开发服务器(Ctrl + C)
1.重启开发服务器(yarn start)
1.转到正在运行localhost:3000的浏览器选项卡
1.(如有必要)刷新页面(对于Chrome浏览器,它是在您输入URL的位置左侧的左上方顺时针箭头)