反应组件未识别

Question

我正在构建[此React教程] [1]，但是一开始就卡住了，因为我的反应组件没有得到认可。 这是我的代码：

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.scss';
import Header from "./components/Header/Header";
import Home from "./components/Home/Home";
import MovieDetails from "./components/MovieDetails/MovieDetails";
import Footer from "./components/Footer/Footer";
import PageNotFound from "./components/PageNotFound/PageNotFound";



function App() {
  return (
    <div className="app">
     <Router>
     <Header></Header>
      <Routes>
          
          <Route path="/"  component= {Home} />
          <Route path="/movie/:imdbID" component={MovieDetails}/>
          <Route element={PageNotFound}/>
          
      </Routes>
      <Footer />
     </Router>
    </div>
  );
}

export default App;

基本上，它识别导入的组件，但不会以正确的黄色字体颜色显示它们。另外，当我仅运行应用程序时，只有页脚，标头和页脚。这些路线都没有工作。

这分别是基本的房屋，标题和页脚组件。

import React from 'react'

const Home = () => {
  console.log("hello");
  return (
    <div>Home</div>
  )
}

export default Home;

import React from 'react'

const Header = () => {
  return (
    <div>Header</div>
  )
}

export default Header

import React from 'react'

const Footer = () => {
  return (
    <div>Footer</div>
  )
}

export default Footer

这是我的包裹。

{
  "name": "movie-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "node-sass": "^7.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts 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"
    ]
  }
}

Answer 1

检查您的React路由器版本，该教程似乎是旧的，并且是弃用的组件。这可能会有所帮助

检查您的Packag.json，并为您使用的版本选择了最佳方法。