I am building [this react tutorial][1] but get stuck at the beginning because my react components are not being recognized. Here is my code:

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;

Basically, it recognizes the imported components but it does not display them in the correct yellow font color. Also, when I run the app only the footer and the header and footer are present. None of the routes work.

Here is the basic Home, Header, and footer component respectively.

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

This is my package.json:

{
  "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"
    ]
  }
}

CodePudding user response：

Check your React router version, the tutorial seems to be old, and those are deprecated components. this may help https://reactrouter.com/docs/en/v6/upgrading/v5

check your packag.json and chose the best method for the version you are using.

CodePudding user response：

Check the updated App.js file,

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

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

export default App;

Following is my package.json file, notice I am using react-router-dom 6.3.0

{
  "name": "stack-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "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"
    ]
  }
}

I have pushed the full project solution here, check and let me know if it worked for you or not.