git克隆和节点模块安装后的反应错误?

Question

我克隆了我的git仓库，这样我就可以在我的其他桌面上工作了。克隆后，我在根文件夹和前端文件夹(MERN项目)上运行npm install并检查包。

我认为一切都安装了，但当我启动我的前端服务器，我得到React错误。第一个是语法错误，尽管代码很好，在我的另一台电脑上也能正常工作。

现在我得到第12-21行"React"在我的App.js上使用JSX时必须在范围内:

import {BrowserRouter as Router, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'
import CartScreen from './screens/CartScreen'
import CheckoutScreen from './screens/CheckoutScreen'
import LoginScreen from './screens/LoginScreen'
function App() {
return (
<Router>
<Header />
<div className="main-content h-full min-h-screen flex" style={{backgroundColor: '#f5fcf7'}}>
<Route path="/" component={HomeScreen} exact />
<Route path="/products/:id" component={ProductScreen}  />
<Route path="/cart" component={CartScreen} />
<Route path="/checkout" component={CheckoutScreen} />
<Route path="/login" component={LoginScreen} />
</div>
<Footer />
</Router>
);
}
export default App;

我知道我没有import react from 'react'，但我从我的项目中删除了它，因为我知道你不需要再导入了。在我的笔记本电脑上运行得很好。

我猜npm install没有正确安装react版本，或者没有安装react版本的某些部分。

这是包裹。前端Json:

{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^5.9.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"react-router-dom": "^5.2.1",
"react-scripts": "^1.1.5",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.9"
}
}

任何想法?

Answer 1

当你有一块"JSX"语法中，你需要从"react"为了让它工作，所以你只需要做以下事情(请注意第一行):

import React from 'react'; //<-- add this line
import {BrowserRouter as Router, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'
import CartScreen from './screens/CartScreen'
import CheckoutScreen from './screens/CheckoutScreen'
import LoginScreen from './screens/LoginScreen'
function App() {
return (
<Router>
<Header />
<div className="main-content h-full min-h-screen flex" style={{backgroundColor: '#f5fcf7'}}>
<Route path="/" component={HomeScreen} exact />
<Route path="/products/:id" component={ProductScreen}  />
<Route path="/cart" component={CartScreen} />
<Route path="/checkout" component={CheckoutScreen} />
<Route path="/login" component={LoginScreen} />
</div>
<Footer />
</Router>
);
}
export default App;

但是，在以后的react版本中，您可能不需要这样做。